Sijan Shrestha Sijan Shrestha -4 years ago 123
React JSX Question

Combining Multiple Reducers

I have a situation where i want to split my reducers to multiple files so i can manage properly.

Lets say I will do 2 things with reducers.


  1. handle products only.

  2. handle contacts only.



I can do it in the same file which works , but becomes difficult to manage.

Hence i would like to split for move user readability.

Here i tried to split the file of reducer.

This is one of the reducers that i will use to fetch products.

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;
}


Here is the another reducers that will store the contacts.

module.exports.contacts=function(state, action) {
console.log("################################## pawn_order",state);
console.log("reducer",state,action);
if (state==null) {
return {};
}
return state;


}

This is how i am combining the reducers.

var product = require("./prodcut")
var contact = require ("./contact")
var combineReducers = require ('redux').combineReducers


module.exports = combineReducers({product,contact});


This is how i call in my main file and pass it to store.

var reducers = require ("./reducer") /// <<<<< this is how i call
var RPC = require('./RPC')
//var actions = require("./actions")
var createStoreWithMiddleware=applyMiddleware(thunkMiddleware)(createStore);
var store=createStoreWithMiddleware(reducers);
ReactDOM.render( <Provider store={store}><Index/></Provider> , document.getElementById('content'))


I tried to follow the tutorial from combine reducers but ran into some issues.

The combining seems to work.

What is wrong?

When the first reducer is called (product) it works
When the second reducer is called (contact ) the whole state seems to be replaced


I want to append the data in the state ( i do not know how to do it ? Please help )

Just for info this is how i call the state data in my contact :

var select=function(state){
return {
product_loading:state.product_loading,
product:state.product,

}
}


And this is how i call in my components

render:function(){
if (!this.props.product_loading) return <div> Loading</div>


Thanks in advance . Looking forward for some solution.

Answer Source

When using combineReducers each reducer will only get to see a slice of the state.

function r1(state) {
  console.log (state); //logs v1
}

function r2(state) {
  console.log (state); //logs v2
}

const c = combineReducers({ r1, r2 });

c({ r1: 'v1', r2: 'v2' }, { type: 'MY_ACTION' });
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download