title: React useReducer: How to combine multiple reducers?
body: <p>I'm not a Javascript expert so I wondered if anyone has an "elegant" way to combine multiple reducers to create a global state(Like Redux). A function that does not affect performance when a state updating multiple components etc..</p>
  
  <p>Let's say I have a store.js</p>
  
  <pre><code>import React, { createContext, useReducer } from "react";
  import Rootreducer from "./Rootreducer"
  
  export const StoreContext = createContext();
  
  const initialState = {
      ....
  };
  
  export const StoreProvider = props =&gt; {
    const [state, dispatch] = useReducer(Rootreducer, initialState);
  
    return (
      &lt;StoreContext.Provider value={[state, dispatch]}&gt;
        {props.children}
      &lt;StoreContext.Provider&gt;
    );
  };
  </code></pre>
  
  <p>Rootreducer.js</p>
  
  <pre><code>import Reducer1 from "./Reducer1"
  import Reducer2 from "./Reducer2"
  import Reducer3 from "./Reducer3"
  import Reducer4 from "./Reducer4"
  
  const rootReducer = combineReducers({
  Reducer1,
  Reducer2,
  Reducer3,
  Reducer4
  })
  
  export default rootReducer;
  </code></pre>