{"id":18206610,"url":"https://github.com/aganglada/with-reducer","last_synced_at":"2025-07-15T22:09:23.119Z","repository":{"id":57398446,"uuid":"102578949","full_name":"aganglada/with-reducer","owner":"aganglada","description":"🔨 React HoC setState with reducer","archived":false,"fork":false,"pushed_at":"2017-09-06T14:59:10.000Z","size":199,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-22T08:46:15.554Z","etag":null,"topics":["component","high-order-component","hoc","react","reducer","redux","setstate"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/with-reducer","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/aganglada.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":"2017-09-06T07:44:53.000Z","updated_at":"2023-09-10T11:04:36.000Z","dependencies_parsed_at":"2022-09-04T00:02:06.494Z","dependency_job_id":null,"html_url":"https://github.com/aganglada/with-reducer","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/aganglada%2Fwith-reducer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aganglada%2Fwith-reducer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aganglada%2Fwith-reducer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aganglada%2Fwith-reducer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aganglada","download_url":"https://codeload.github.com/aganglada/with-reducer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246746389,"owners_count":20827058,"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":["component","high-order-component","hoc","react","reducer","redux","setstate"],"created_at":"2024-11-03T12:05:31.267Z","updated_at":"2025-04-02T15:30:39.598Z","avatar_url":"https://github.com/aganglada.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# with-reducer\n\nReact High order Component that allow you to dispatch actions with no need of `redux` as dependency.\n\nRedux architecture is really nice, but [you might not need it](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367), instead you can only use `setState`.\n\nBut what about going a little bit further and keep your reducers as the key part of your application. `with-reducer` allows you to perfom this `setState` call, with a known interface like `redux`.\n\n### Install\n\n```\nnpm install with-reducer\n```\n\n```\nyarn add with-reducer\n```\n\n### Usage\n\n1. Create a component and export it with `withReducer`. You will need to provide a valid reducer for that component to work. \n\n\u003e By doing that, you will get just for free a `dispatch` function into your props.\n\n```js\n// example.js\n\nimport React, { Component } from 'react';\nimport withReducer from 'with-reducer';\nimport reducer from './example.reducer';\nimport { INCREMENT, DECREMENT } from './example.actions';\n\nclass Example extends Component {\n  state = {\n    counter: 0\n  };\n\n  increment = () =\u003e {\n    this.props.dispatch(INCREMENT);\n  };\n\n  decrement = () =\u003e {\n    this.props.dispatch(DECREMENT);\n  };\n\n  render() {\n    const { counter } = this.props;\n\n    return (\n      \u003cdiv\u003e\n        \u003cbutton onClick={this.decrement} type=\"button\"\u003e\n          -\n        \u003c/button\u003e\n        \u003cspan\u003e{counter}\u003c/span\u003e\n        \u003cbutton onClick={this.increment} type=\"button\"\u003e\n          +\n        \u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default withReducer(reducer)(Example);\n```\n\n2. Create your reducer\n\n```js\n// example.reducer.js\n\nimport { INCREMENT, DECREMENT } from './example.actions';\n\nexport default (state, action) =\u003e {\n  switch (action.type) {\n    case INCREMENT:\n      return Object.assign({}, state, {\n        counter: state.counter + 1\n      });\n    case DECREMENT:\n      return Object.assign({}, state, {\n        counter: state.counter - 1\n      });\n    default:\n      return state;\n  }\n};\n```\n\n3. And then your actions\n\n```js\n// example.actions.js\n\nexport const INCREMENT = 'INCREMENT';\nexport const DECREMENT = 'DECREMENT';\n```\n\nThat's it. Now you can do all your state modifications using `dispath` like you were dispathing a function in your `redux` app.\n\n#### dispatch(actionType, payload = {})\n\n* actionType: string\n* payload: object, data you might need for that action.\n\nThis function will receive the name of the action to be executed and the payload (in case you need it).\n\nIt will automatically set the state and pass the same values as props in your component.\n\n### Contributing\n\nI would love to see you contributing to `with-reducer`, also by giving feedback.\nIf you think something is missing, [create a new issue](https://github.com/aganglada/with-reducer/issues).\n\n[Pull request](https://github.com/aganglada/with-reducer/pulls) are more than welcome ❤️️\n\n\n### License\n\nMIT \u0026copy; aganglada\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faganglada%2Fwith-reducer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faganglada%2Fwith-reducer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faganglada%2Fwith-reducer/lists"}