title: How to implement React useReducer for multiple state objects in a single provider
body: <p>We have three related but separate gigantic state objects in one provider and aren't sure which way is better to implement useReducer.</p>
  
  <p>We're in the middle of migrating to use useReducer and it would be hard to manage sticking them all in a single initialState.</p>
  
  <pre><code>const initialStateA = {
    ...
  }
  
  const initialStateB = {
    ...
  }
  
  const initialStateC = {
    ...
  }
  </code></pre>
  
  <p><strong>Option 1:</strong> one single 'mainReducer' to manage everything</p>
  
  <pre><code>const mainReducer = ({reducerA, reducerB, reducerC}, action) =&gt; {
    // reducerA + reducerB + reducerC....
  }
  
  const [state, dispatch] = useReducer(mainReducer, {...initialStateA, ...initialStateB, ...initialStateC})
  </code></pre>
  
  <p><strong>Option 2:</strong> having three separate useReducers</p>
  
  <pre><code>const [stateA, dispatchA] = useReducer(reducerA, initialStateA)
  const [stateB, dispatchB] = useReducer(reducerB, initialStateB)
  const [stateC, dispatchC] = useReducer(reducerC, initialStateC)
  </code></pre>
  
  <p><strong>Which approach is better? What are the pros/cons for each or is there little/no difference between the two?</strong></p>