{"id":21437875,"url":"https://github.com/devsrv/react-reducer-action-pattern","last_synced_at":"2026-05-18T04:35:30.271Z","repository":{"id":42755858,"uuid":"279126232","full_name":"devsrv/react-reducer-action-pattern","owner":"devsrv","description":"clean React state management - cleaner alternative to useState hook with reducer-action pattern based on HOC","archived":false,"fork":false,"pushed_at":"2023-01-06T11:19:32.000Z","size":4028,"stargazers_count":0,"open_issues_count":19,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-23T09:44:12.047Z","etag":null,"topics":["react","react-hooks","reacthooks","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devsrv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-12T18:40:28.000Z","updated_at":"2020-08-25T14:18:43.000Z","dependencies_parsed_at":"2023-02-05T23:31:06.146Z","dependency_job_id":null,"html_url":"https://github.com/devsrv/react-reducer-action-pattern","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devsrv%2Freact-reducer-action-pattern","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devsrv%2Freact-reducer-action-pattern/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devsrv%2Freact-reducer-action-pattern/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devsrv%2Freact-reducer-action-pattern/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devsrv","download_url":"https://codeload.github.com/devsrv/react-reducer-action-pattern/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243950798,"owners_count":20373664,"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","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":["react","react-hooks","reacthooks","reactjs"],"created_at":"2024-11-23T00:30:02.533Z","updated_at":"2025-10-03T18:23:34.254Z","avatar_url":"https://github.com/devsrv.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React reducer-action pattern\n\ncleaner state management for react without pulling any dependency\n\n## 🌈 what is this?\n\n\u003e this is not a package, it is a micro implementation of the approach/ idea. you can think it of a clean alternative to useState for individual component's state management without needing to install any package.\n\nFeel free to download the app \u0026 check the source to get the idea, in the project directory, run:\n\n### 🌬 `yarn start`\n\n##  🤖  how it works !\n\nthis approach uses react's useReducer hook and a custom HOC thats it.\nthe HOC wraps your component just like Redux does and you get `state` and `action` as props for that component\n\n## ⌨️ how to use ?\n- ✔ create `actionType` constants - [actionType.js](https://github.com/devsrv/react-reducer-action-pattern/blob/47dbb94d53d6dbae3b9f78ee05242857d6dc9ccf/src/components/posts/actions/actionType.js#L1)\n- ✔ create `reducer` - [post.js](https://github.com/devsrv/react-reducer-action-pattern/blob/master/src/components/posts/reducer/Post.js)\n- ✔ create `action.js` where you keep all the functions (_as object_) which are capable of dispatching to reducers (any extra works before dispatching also can be done here, __but dont forget to use `await` statements properly__ ) - [action.js](https://github.com/devsrv/react-reducer-action-pattern/blob/47dbb94d53d6dbae3b9f78ee05242857d6dc9ccf/src/components/posts/actions/action.js#L5)\n- ✔ export your component using the `withAction` HOC - [PostsComponent.js](https://github.com/devsrv/react-reducer-action-pattern/blob/47dbb94d53d6dbae3b9f78ee05242857d6dc9ccf/src/components/posts/PostsComponent.js#L44)\n- ✔ now you can get the state by using `props.state` [PostsComponent.js](https://github.com/devsrv/react-reducer-action-pattern/blob/47dbb94d53d6dbae3b9f78ee05242857d6dc9ccf/src/components/posts/PostsComponent.js#L20)\n- ✔ apply any action by using `props.action.ACTION_PROPERTY_NAME` - [PostsComponent.js](https://github.com/devsrv/react-reducer-action-pattern/blob/47dbb94d53d6dbae3b9f78ee05242857d6dc9ccf/src/components/posts/PostsComponent.js#L16)\n\n## 📑 IMPORTANT NOTES\n\n##### 🚫 this approach is for state management of individual component not for entire app so don't think it as a replacement of Redux\n\n##### 🚫 use this pattern when your component is using too many `useState`\n \n##### 🚫 make seperate reducer \u0026 action for individual components and don't use any other component's reducer in a different component's export thinking that you'll get its state outside of the component ( this approach uses `useReducer` \u0026 that's how it works )\n\n## 🎯 Tips\n- only go for this approach when you think your component is using too many `useState`\n\n- you can use `useContext` and apply the same idea of this approach __to achieve the state management for your entire app__ without needing to install any other package\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevsrv%2Freact-reducer-action-pattern","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevsrv%2Freact-reducer-action-pattern","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevsrv%2Freact-reducer-action-pattern/lists"}