cartmanishere / hooks-combined-reducers

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 and pass dispatch function (and state) down via React's Context API with Provider and Consumer/useContext.

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

Want to know the developer behind this package?

LinkedIn Facebook Twitter