\n\n# useCombinedReducers React Hook\n\nCustom hook to combine multiple useReducer hooks into a single state container with one dispatch function. Use at top-level. Pass dispatch function and state down via props or [React's Context API](https://reactjs.org/docs/context.html) with Provider and Consumer/useContext.\n\n## Installation\n\n`npm install @nickcoleman/use-combined-reducers`\nor\n`yarn add @nickcoleman/use-combined-reducers`\n\n## Usage\n\nUse `useCombinedReducers()` to combine multiple useReducers into a single `state` object and a global `dispatch`.\n\n```\nimport React, { useReducer } from 'react';\nimport useCombinedReducers from '@nickcoleman/use-combined-reducers';\n\n...\n\nconst App = () => {\n const [state, dispatch] = useCombinedReducers({\n myWidgets: useReducer(widgetsReducer, initialState.widgets),\n myThings: useReducer(thingsReducer, initialState.things),\n });\n\n const { myWidgets, myOtherWidgets } = state;\n\n ...\n}\n\nexport default App;\n```\n\n## Usage Example - Passing state and dispatch\n\nPass `state` and `dispatch` down via [React's Context API](https://reactjs.org/docs/context.html).\n\nAn example how I use it is shown below -- but, it's same as if you'd used a single useReducer to generate state and dispatch.\n\n---\n\n### 1. Setup Context\n\nIn `src/context.js`\n\n```\nimport { createContext } from \"react\"\n\nexport default createContext()\n```\n\nIn `src/hooks.js`.\nI personally find `useAppContext()` easier to use/understand than using a pure Consumer/useContext pattern within my components.\n\n```\nimport { useContext } from \"react\"\nimport Context from \"src/context\"\n\nexport const useAppContext = () => useContext(Context)\n```\n\n---\n\n### 2. Setup Parent Component\n\nIn your top-level React component ... this could be either your entry file (as shown) or the parent component of a component tree you want to pass context on:\n\n```\nimport React, { useReducer } from 'react';\nimport useCombinedReducers from '@nickcoleman/use-combined-reducers';\n\nimport Context from 'src/context';\nimport SomeComponent from 'src/components/SomeComponent'\n\nimport { widgetsReducer, thingsReducer, initialState } from 'store/reducers'\n\nconst App = () => {\n const [state, dispatch] = useCombinedReducers({\n myWidgets: useReducer(widgetsReducer, initialState.widgets),\n myThings: useReducer(thingsReducer, initialState.things),\n });\n\n return (\n \n \n \n );\n}\n\nexport default App;\n```\n\n---\n\n### 3. Setup Child Component\n\nExample of a child component which consumes the context. This child must sit below the parent provider in the component tree.\n\nI'm a huge fan of the [reducks](https://github.com/alexnm/re-ducks) pattern (and the redux pattern in general). And, adapted that pattern to using hooks. It took me awhile to figure out how to get dispatch to work using that pattern. So, I've also shown an example of passing `dispatch` if you use a hooks/context version of the reducks pattern or another pattern that splits-out non-action creator logic into a seperate file.\n\n```\nimport React, { useContext } from 'react';\n\nimport { useAppContext } from 'src/hooks.js';\nimport * as actions from 'store/actions'\nimport * as operations from 'store/operations' // if using reducks patern with hooks\n\nfunction SomeComponent() {\n const { state, dispatch } = useAppContext();\n\n const { myWidgets, myThings } = state;\n\n const addWidget = widget => {\n dispatch(action.addWidget(widget))\n }\n\n // example if using a reducks pattern.\n const addThing = thing => {\n operations.addThing({ thing, dispatch })\n }\n\n return (\n
![](\"https://img.shields.io/badge/version-1.0.26-blue.svg?cacheSeconds=2592000\"){kind=icon}
\n \n ![\"Documentation\"](\"https://img.shields.io/badge/documentation-yes-brightgreen.svg\"){kind=icon}
\n \n \n ![\"Maintenance\"](\"https://img.shields.io/badge/Maintained%3F-yes-green.svg\"){kind=icon}
\n \n \n ![\"License:](\"https://img.shields.io/badge/License-MIT-yellow.svg\"){kind=icon}
\n \n