CODEWITHSUNDEEP
javascriptreactjsecmascript-6react-routerredux
Jalil
Jalil

Reputation: 3168

react-router-redux breaks my application state

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.

only routing.location

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

no routing.location

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

What am I doing wrong ?

Thank you all !

Upvotes: 1

Views: 1031

Answers (2)

larrydahooster
larrydahooster

Reputation: 4163

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.

Upvotes: 1

Steven
Steven

Reputation: 1596

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.

Upvotes: 1

Related Questions