hooks-combined-reducers
v1.0.2
Published
[![Github issues](https://img.shields.io/github/issues/SagarBajpai/hooks-combined-reducers)](https://github.com/SagarBajpai/hooks-combined-reducers/issues) [![Github forks](https://img.shields.io/github/forks/SagarBajpai/hooks-combined-reducers)](https:
Downloads
8
Maintainers
Readme
hooksCombinedReducers React Hook
Its a custom hook to combine all your useReducer hooks in return for one global state container with one dispatch function. You can use it at the top-level component & it will pass a dispatch and state functions down with the help of React's Context API with Provider and Consumer (or useContext).
Installation
npm install hooks-combined-reducers
Usage
Create a global dispatch function and state object by initializing multiple useReducer
hooks in hookCombinedReducers
:
Create your reducer first, in some file Table.js
inside any Reducer folder
const tableState = {
selected: []
};
const tableReducer = (state, action) => {
switch (action.type) {
case "TABLE_CHECK_BOXES":
return {
...state,
selected: action.value,
};
default:
return state;
}
};
export { tableState, tableReducer };
Inside some file named as Context.js
:
import React, { useReducer } from "react";
import hooksCombinedReducers from 'hooks-combined-reducers';
import { tableState, tableReducer } from "./Reducers/Table";
export const StateContext = React.createContext();
export const DispatchContext = React.createContext();
function HookProvider(props) {
const [state, dispatch] = hooksCombinedReducers({
table: useReducer(tableReducer, tableState),
});
return (
<DispatchContext.Provider value={dispatch}>
<StateContext.Provider value={state}>
{props.children}
</StateContext.Provider>
</DispatchContext.Provider>
);
}
export { HookProvider };
Inside root file App.js
:
import React from 'react';
import { HookProvider } from "./Context";
import AppComponent from "./AppComponent";
function App(){
return (
<HookProvider>
<AppComponent />
</HookProvider>
)
}
export default App;
Inside some component with name AppComponent.js
:
import React, { useEffect, useContext } from "react";
import { StateContext, DispatchContext } from "./Context";
function AppComponent() {
const state = useContext(StateContext);
const dispatch = useContext(DispatchContext);
useEffect(() => {
dispatch({ type: "TABLE_CHECK_BOXES", value: [0] });
}, []);
return <div>Hello There!</div>;
}
export default AppComponent;
Contribute
git clone https://github.com/SagarBajpai/hooks-combined-reducers.git
cd hooks-combined-reducers
npm install