title: Combining Multiple Reducers
body: <p>I have a situation where i want to split my reducers to multiple files so i can manage properly.</p>
  
  <p>Lets say I will do 2 things with reducers. </p>
  
  <ol>
  <li>handle products only.</li>
  <li>handle contacts only.</li>
  </ol>
  
  <p>I can do it in the same file which works , but becomes difficult to manage.</p>
  
  <p>Hence i would like to split for move user readability.</p>
  
  <p>Here i tried to split the file of reducer.</p>
  
  <p>This is one of the reducers that i will use to fetch products.</p>
  
  <pre><code>module.exports.products=function(state, action) {
  console.log("################################## branch_order");
  console.log("reducer",state,action);
  if (state==null) {
      return {};
  }
  var new_state=$.extend(true,{},state); // XXX: deep-copy
  console.log(action.type,"action type")
  switch (action.type) {
      case "PRODUCT_LOADING":
          new_state.product_loading=true;
          break;
      case "PRODUCT_LOADED":
          new_state.product_loading=false;
          new_state.product=action.product;
          break;
  
  }
  console.log("new_state",new_state);
  return new_state;
  }
  </code></pre>
  
  <p>Here is the another reducers that will store the contacts.</p>
  
  <pre><code>module.exports.contacts=function(state, action) {
  console.log("################################## pawn_order",state);
  console.log("reducer",state,action);
  if (state==null) {
      return {};
  }
  return state;
  </code></pre>
  
  <p>}</p>
  
  <p>This is how i am combining the reducers.</p>
  
  <pre><code>var product = require("./prodcut")
  var contact = require ("./contact")
  var combineReducers = require ('redux').combineReducers
  
  
  module.exports = combineReducers({product,contact});
  </code></pre>
  
  <p>This is how i call in my main file and pass it to store.</p>
  
  <pre><code>var reducers = require ("./reducer") /// &lt;&lt;&lt;&lt;&lt; this is how i call 
  var RPC = require('./RPC')
  //var actions = require("./actions")
  var createStoreWithMiddleware=applyMiddleware(thunkMiddleware)(createStore);
  var store=createStoreWithMiddleware(reducers);
  ReactDOM.render( &lt;Provider store={store}&gt;&lt;Index/&gt;&lt;/Provider&gt; , document.getElementById('content'))
  </code></pre>
  
  <p>I tried to follow the tutorial from <a href="http://redux.js.org/docs/api/combineReducers.html" rel="nofollow">combine reducers</a> but ran into some issues.</p>
  
  <p>The combining seems to work.</p>
  
  <p><strong>What is wrong?</strong></p>
  
  <p><em>When the first reducer is called (product) it works
  When the second reducer is called (contact ) the whole state seems to be replaced</em></p>
  
  <p>I want to append the data in the state ( i do not know how to do it ? Please help )</p>
  
  <p>Just for info this is how i call the state data in my contact :</p>
  
  <pre><code>var select=function(state){
  return {
      product_loading:state.product_loading,
      product:state.product,
  
  }
  }
  </code></pre>
  
  <p>And this is how i call in my components </p>
  
  <pre><code>render:function(){
      if (!this.props.product_loading) return &lt;div&gt; Loading&lt;/div&gt;
  </code></pre>
  
  <p>Thanks in advance . Looking forward for some solution.</p>