{"id":25525248,"url":"https://github.com/doniyor2109/redux-lightweight","last_synced_at":"2025-07-31T13:33:38.807Z","repository":{"id":53099789,"uuid":"157334224","full_name":"doniyor2109/redux-lightweight","owner":"doniyor2109","description":"Write one business logic instead of writing actions, action types and reducers","archived":false,"fork":false,"pushed_at":"2021-04-06T20:00:35.000Z","size":174,"stargazers_count":40,"open_issues_count":3,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-08T00:15:59.253Z","etag":null,"topics":["action","react","reducer","redux"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/redux-lightweight","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/doniyor2109.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-13T06:52:47.000Z","updated_at":"2025-02-24T12:50:58.000Z","dependencies_parsed_at":"2022-09-16T21:21:16.135Z","dependency_job_id":null,"html_url":"https://github.com/doniyor2109/redux-lightweight","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/doniyor2109/redux-lightweight","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doniyor2109%2Fredux-lightweight","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doniyor2109%2Fredux-lightweight/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doniyor2109%2Fredux-lightweight/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doniyor2109%2Fredux-lightweight/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doniyor2109","download_url":"https://codeload.github.com/doniyor2109/redux-lightweight/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doniyor2109%2Fredux-lightweight/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268047862,"owners_count":24187205,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-31T02:00:08.723Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["action","react","reducer","redux"],"created_at":"2025-02-19T20:18:57.300Z","updated_at":"2025-07-31T13:33:38.760Z","avatar_url":"https://github.com/doniyor2109.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# redux-lightweight\n\nThis library generates actions creators, action types and reducers for you. It uses class as a syntactic sugar for generating actions and reducers.\n\n\n[![](https://img.shields.io/npm/v/redux-lightweight.svg)](https://www.npmjs.com/package/redux-lightweight)\n[![Build Status](https://travis-ci.com/doniyor2109/redux-lightweight.svg?branch=master)](https://travis-ci.com/doniyor2109/redux-lightweight)\n[![codecov](https://codecov.io/gh/doniyor2109/redux-lightweight/branch/master/graph/badge.svg)](https://codecov.io/gh/doniyor2109/redux-lightweight)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)\n[![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/doniyor2109/redux-lightweight/blob/master/LICENSE)\n\n[![](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/doniyor2109/status/1075425404100468736)\n\n\n### Table of Contents\n\n- [Introduction](#introduction)\n  - [Motivation](#motivation)\n- [Getting Started](#getting-started)\n  - [Installation](#installation)\n  - [Usage](#usage)\n    - [Usage with React Hooks](#usage-with-react-hooks)\n    - [Usage with react-redux](#usage-with-react-redux)\n    - [Usage with redux-saga](#usage-with-redux-saga)\n    - [Usage only for actions](#usage-only-for-actions)\n  - [Advanced Usage](#advanced-usage)\n- [How it works](#how-it-works)\n- [API Reference](#api-reference)\n  - [createUpdater(Updater)](#createupdaterupdater)\n  - [useUpdater(Updater)](#useupdaterupdater)\n- [Licence](#licence)\n\n# Introduction\n\n## Motivation\n\nRedux is great library which solves data management. However it introduces some boilerplate. In order to add one business logic, developer must create 3 different things (action type, action creator, reducer) and they do one thing together. That is why I have decide to create utility that allows declare them in one place.\nOne business logic should be declared in one place.\n\nThis library is inspired by [redux-actions](https://github.com/redux-utilities/redux-actions) and [mobx](https://mobx.js.org/)\n\n# Getting Started\n\n## Installation\n\n```bash\n$ npm install --save redux-lightweight\n```\n\nor\n\n```bash\n$ yarn add redux-lightweight\n```\n\n## Usage\n\nCreate class that has `state` property as initial state and methods as actions.\n\n```js\nimport { createUpdater } from 'redux-lightweight';\n\nexport class Counter {\n  state = 10;\n  \n  increment(amount = 1) {\n    return this.state + amount;\n  }\n  \n  decrement(amount = 1) {\n    return this.state - amount;\n  }\n}\n\nexport const [counterReducer, counterActions] = createUpdater(Counter);\n\ncounterReducer; //  reducer for Counter class\ncounterActions; //  action creator for Counter  class - { increment, decrement }\n```\n\n### Usage with React Hooks\n\n`redux-lightweight` exposes `useUpdater` custom hook to make it easier working with reducers.\n\n```jsx harmony\nimport React from 'react';\nimport { useUpdater } from 'redux-lightweight';\n\nimport { Counter } from './Counter';\n\nfunction CounterView() {\n    const [counter, { increment, decrement }] = useUpdater(Counter);\n    return (\n        \u003cdiv\u003e\n            \u003cp\u003e{counter}\u003c/p\u003e\n            \u003cbutton onClick={() =\u003e increment()}\u003e+\u003c/button\u003e\n            \u003cbutton onClick={() =\u003e decrement()}\u003e-\u003c/button\u003e\n        \u003c/div\u003e\n    );\n}\n```\n\n[![Edit 0y50x9040v](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/0y50x9040v?module=%2Fsrc%2Fhook%2Findex.js\u0026moduleview=1)\n\n\n### Usage with react-redux\n\n`redux-lightweight` generates simple action creators and reducer. So you can work with them as usual.\n\n```jsx harmony\nimport React from 'react';\nimport { connect } from 'react-redux';\n\nimport { counterActions } from './Counter';\n\nfunction Counter({ counter, increment, decrement }) {\n    return (\n        \u003cdiv\u003e\n            \u003cp\u003e{counter}\u003c/p\u003e\n            \u003cbutton onClick={increment}\u003e+\u003c/button\u003e\n            \u003cbutton onClick={decrement}\u003e-\u003c/button\u003e\n        \u003c/div\u003e\n    );\n}\n\nconst mapStateToProps = (state) =\u003e ({ counter: state });\n\nconst mapDispatchToProps = {\n  increment: counterActions.increment,\n  decrement: counterActions.decrement\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Counter);\n```\n\n[![Edit 0y50x9040v](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/0y50x9040v?module=%2Fsrc%2Fredux%2Findex.js\u0026moduleview=1)\n\n### Usage with redux-saga\n\nIn order to handle `redux-lightweight` generated action creators in saga, you can access action type with action function itself:\n\n```js\nimport { takeEvery } from 'redux-saga/effects';\n\nimport { counterActions } from './Counter';\n\nfunction* rootSaga() {\n  yield takeEvery(counterActions.increment.type, incrementWorkerSaga);\n}\n```\n\n### Usage only for actions\n\nIf you have already big reducers that are difficult to migrate then you can use library as action generator.\n\n\u003e Arguments passed to actions will be array in payload\n```js\n{\n  type: actionType,\n  payload: args // array of arguments\n}\n```\n\n```js\nexport class Counter {\n  increment(amount) {}\n  \n  decrement(amount) {}\n}\n\nconst [, counterActions] = createUpdater(Counter);\n\nswitch(type, payload) {\n   case counterActions.increment.type:\n    return state + payload[0];\n  case counterActions.decrement.type:\n    return state - payload[0];\n   default:\n    return state;\n}\n\ndispatch(counterActions.increment(1));\n```\n\n## Advanced Usage\n\nAs `redux-lightweight` works with classes, you can use extended classes as well. That is useful to reuse reducers and actions.\n\n```js\n\nclass Calculator extends Counter {\n  double() {\n    return this.state * 2;\n  }\n}\n\nexport const [calculatorReducer, calculatorActions] = createUpdater(Calculator);\n```\n\nNow it generates 3 action creators:\n\n- `increment`\n- `decrement`\n- `double`\n\n# How it works\n\nBasically redux-lightweight generates action creators, action types and reducers for you.\n\nWhen you pass your class to `redux-lightweight`, it generates following things for you:\n\n- **Action creator** - Each method of class e.g increment, decrement\n- **Action type** - Prefixed by class name e.g \"Counter/increment\"\n- **Reducer** - Which handles all actions inside class\n  - In order to set initial state for reducer, declare `state` property on class.\n\n```js\nclass Counter {\n  state = 10; // Initial state for reducer = 10\n  \n  increment(amount = 1) {\n    return this.state + amount;\n  }\n  \n  decrement(amount = 1) {\n    return this.state - amount;\n  }\n}\n\nconst [counterReducer, counterActions] = createUpdater(Counter)\n```\n\n- `counterActions` contains all methods of `Counter` class as actions. In this case there will be two actions:\n\n\n```js\ncounterActions.increment(100) // { type: \"Counter/increment\", args: [100] }\n\ncounterActions.decrement(100) // { type: \"Counter/decrement\", args: [100] }\n```\n\n- `counterReducer` is reducer that handles all actions of class. It is same as with following `switch/case` statements:\n\n```js\nswitch(type) {\n   case \"Counter/increment\":\n    return state + amount;\n  case \"Counter/decrement\":\n    return state - amount;\n   default:\n    return state;\n}\n```\n\n\nIf you want to get action type for action then you can access it with `type` property of action:\n\n```js\ncounterActions.increment.type // \"Counter/increment\"`\n```\n \n# API Reference\n\n#### `createUpdater(Updater)`\n\nCreates reducer and action creators for given Updater class. Receives class that has `state` property and methods.\n\n###### EXAMPLE\n\n```js\nconst [reducer, actions] = createUpdater(Counter);\n```\n\n#### `useUpdater(Updater)`\n\nCustom hook for using Updater. Receives class that has `state` property and methods.\n\n###### EXAMPLE\n\n```js\nfunction App() {\n  const [state, actions] = useUpdater(Counter);\n}\n```\n\n\n# Licence\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoniyor2109%2Fredux-lightweight","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoniyor2109%2Fredux-lightweight","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoniyor2109%2Fredux-lightweight/lists"}