react-router-redux breaks my application state

Question

I tried to set up react-router-redux in my application, as presented here, but it broke my state.

Here is my store setup :

import { createStore, applyMiddleware } from 'redux'
import { combineReducers } from 'redux'
import thunk from 'redux-thunk'
import { syncHistory, routeReducer } from 'react-router-redux'
import rootReducer from '../reducers'
import Immutable, {Map} from 'immutable'
[Other imports]

const middleware = [X,Y]

const reducer = combineReducers(Object.assign({}, rootReducer, {
  routing: routeReducer
}));

export default function configureStore(initialState, history) {

   const reduxRouterMiddleware = syncHistory(history);
   middleware.push(reduxRouterMiddleware);

   const createStoreWithMiddleware = applyMiddleware(...middleware)(createStore);

   const store = createStoreWithMiddleware(reducer, initialState);     

   return store

}

Here is my reducers/index.js :

import { combineReducers } from 'redux'
import A from './A'
import B from './B'
import C from './C'
...

const rootReducer = combineReducers({
  A,
  B,
  C,
  ...
})

export default rootReducer

When I console.log in my application my store.getState(), I get : only a routing.location tree.

If I use "rootReducer" instead of "reducer" when creating my store, I get my normal state tree (A, B, C ...)

but of course I no longer get the routing.location part I'm interested in ...

What am I doing wrong ?

Thank you all !

Steven · Accepted Answer · 2016-02-10 08:45:11Z

1

I think it's because you call combineReducer on your own reducers, and then again to merge in the routing reducer. I'd just export an object from your own reducers, and do the combineReducer call once, where you Object.assign the route reducer in.

answered Feb 10, 2016 at 8:45

Steven

1,5962 gold badges16 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jalil Over a year ago

Thank you Steven ! Removing the first call to combineReducers (in reducers/index.js) worked ! As a reducer is already a function, I though could merge a reducers combination with another reducer ... Apparently it's not possible :-) ...

larrydahooster · Accepted Answer · 2016-02-10 08:47:59Z

1

I think the problem lies here:

const reducer = combineReducers(Object.assign({}, rootReducer, {
  routing: routeReducer
}));

rootReducer is not a plain object, but a function that is returned by the method combineReducer, looking like that:

function combination() {
    var state = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
    var action = arguments[1]; ...
}

So what you do is merging an object with a function, which returns the object only. In your case 'routing' only.

answered Feb 10, 2016 at 8:47

larrydahooster

4,1634 gold badges42 silver badges48 bronze badges

1 Comment

Jalil Over a year ago

Thank you too @larrydahooster ! Removing the first call to combineReducers (in reducers/index.js) worked ! Maybe if I had wrote combineReducers({rootReducer, routing:routeReducer}) .... ?

Collectives™ on Stack Overflow

react-router-redux breaks my application state

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related