Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork9
Custom hook to combine all useReducer hooks for one global state container.
License
the-road-to-learn-react/use-combined-reducers
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Custom hook to combine all useReducer hooks for one global state container with one dispatch function. Use at top-level and pass dispatch function (and state) down via React's Context API with Provider and Consumer/useContext.
- Example Application
- "How to implement it"-tutorial.
- Requirements:reducer anduseReducer explained.
npm install use-combined-reducers
Optional TS support:npm install @types/use-combined-reducers --save-dev
Create a global dispatch function and state object by initializing multipleuseReducer hooks inuseCombinedReducers:
import React from 'react';import useCombinedReducers from 'use-combined-reducers';const App = () => { const [state, dispatch] = useCombinedReducers({ myTodos: React.useReducer(todoReducer, initialTodos), myOtherStuff: React.useReducer(stuffReducer, initialStuff), }); const { myTodos, myOtherStuff } = state; ...}export default App;You can pass state and dispatch function down viaprops orReact's Context API. Since passing it down with props is straight forward, the approach with context is demonstrated here. In some file:
import React from 'react';export const StateContext = React.createContext();export const DispatchContext = React.createContext();In your top-level React component (or any other component above a component tree which needs managed state):
import React from 'react';import useCombinedReducers from 'use-combined-reducers';import { StateContext, DispatchContext } from './somefile.js'; const App = () => { const [state, dispatch] = useCombinedReducers({ myTodos: React.useReducer(todoReducer, initialTodos), myOtherStuff: React.useReducer(stuffReducer, initialStuff), }); return ( <DispatchContext.Provider value={dispatch}> <StateContext.Provider value={state}> <SomeComponent /> </StateContext.Provider> </DispatchContext.Provider> );}export default App;In some other component which sits below the state/dispatch providing component:
import React from 'react';import { StateContext, DispatchContext } from './somefile.js'; export default () => { const state = React.useContext(StateContext); const dispatch = React.useContext(DispatchContext); const { myTodos, myOtherStuff } = state; return ( <div> ... </div> );};git clone git@github.com:the-road-to-learn-react/use-combined-reducers.gitcd use-combined-reducersnpm installnpm run test
About
Custom hook to combine all useReducer hooks for one global state container.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
Uh oh!
There was an error while loading.Please reload this page.