javascript - Not able to combineReducers() -

i have 2 reducers in separate folders separate components in structure similar this:

index.js        /componentone            |_ componentone.js            |_ componentoneactioncreator.js            |_ componentonereducer.js        /componenttwo            |_ componenttwo.js            |_ componenttwoactioncreator.js            |_ componenttworeducer.js 

each of these reducers work individually within app - when createstore in index.js (they're imported in) - if try , combine them using combinereducers(), neither of functions work (doesn't break ui however). think has state - more code reference below:

index.js

const rootreducer = combinereducers({   componentonereducer,   componenttworeducer });  let store = createstore(rootreducer, applymiddleware(thunk)) 

componentonereducer

export default(state = {}, payload) => {    let newstate = json.parse(json.stringify(state));    switch (payload.type) {     case 'request_data':         newstate.isloading = true;         return newstate;     case 'receive_data':         newstate.isloading = false;         newstate.pagedata = payload.payload;         newstate.pagename = payload.payload.pagename;          return newstate     default:          return state;   } } 

componenttworeducer.js similar not exact same componentonereducer.js.

componentone.js

    return (     <layout>     <section>         <sectionheader headertext={this.props.pagename}></sectionheader>    ....  function mapstatetoprops(state, props) {   return {     pagename: state.pagename   } }  function mapdispatchtoprops(dispatch) {   return {     actions: {       getdata: function() {       dispatch(getdata());      }    }   } }  export default connect(mapstatetoprops, mapdispatchtoprops) (componentone); 

any ideas i'm missing here?

i suspect issue not using state tree keys. using combinereducers in example resulting state tree becomes named reducer. due object shorthand { componentonereducer } becomes { componentonereducer: componentonereducer }, while can explicitly change e.g. { reducerone: componentonereducer }

therefore state becomes this:

{   componentonereducer: {loading: false, pagedata: 123},   componenttworeducer: {loading: true, pagedata: null} } 

when mapping state props should use e.g.

const mapstatetoprops = state => ({   loading: state.componentonereducer.loading   pagedata: state.componentonereducer.pagedata }) 

and this.props.loading in component.

i suggest drop using json.parse(json.stringify(state)) , immutable directly instead.

export default(state = {}, payload) => { switch (payload.type) {   case 'request_data': {     return {       ...state,       isloading: true;     };   }   case 'receive_data': {     return {       ...state,       isloading: false,       pagedata: payload.payload,       pagename: payload.payload.pagename     }   }   default:      return state; } } 

wiki