Redux: Passing a preloadedstate with combined reducer and store enhancer

Question

I created a redux store with the reducer and enhancer functions.

    const store = createStore(rootReducer, compose(
      applyMiddleware(thunk),
      DevTools.instrument()
    ))

rootReducer uses combineReducers to create a single root reducer. I would like to initialize the window's location value within the store so I tried something like this:

 const initialWindowLocation = window.location.hostname
 const store = createStore(rootReducer, initialWindowLocation, compose(
      applyMiddleware(thunk),
      DevTools.instrument()
 ))

I connected the store to the redux forms and I'm able to grab all the reducer values via mapStateToProps but I'm stuck trying to access a simple string value(i.e.initialWindowLocation) from the redux createStore. Is there some redux tricks that I'm missing?

Also if I try that I'm getting an unexpected key error:

 Unexpected key found in previous state received by the reducer.

Any thoughts on this? Thanks in advance.

RIYAJ KHAN RIYAJ KHAN · Accepted Answer · 2017-08-26T03:05:59

As per the redux docs here,

createStore(reducer, [preloadedState], [enhancer])

[preloadedState] (any): The initial state. You may optionally specify it to hydrate the state from the server in universal apps, or to restore a previously serialized user session. If you produced reducer with combineReducers, this must be a plain object with the same shape as the keys passed to it. Otherwise, you are free to pass anything that your reducer can understand.

Its better to create one more reducers.

const window = ( state = window.location.hostname,action )=>state;

and add it to the combineReducers list.

EDIT :

I'm wondering why passing in the plain object as the second argument to the createStore doesn't work

Assume your rootReducer look like this one.

const window = (state = { location: "test" }, action) => state;
const user = (state = "", action) => state;
const rootReducer = combineReducers({ window, user });

When you say "passing in the plain object as the second argument to the createStore", Its means,preloadedstate should be matching the reducer default state.

preloadedstate = { user: [], window: { location: "windowone" } }`

const store = createStore(rootReducer, { user: [], window: { location: "windowone" } }, applyMiddleware(...middleWare));

otherwise,you will get an error Unexpected key found in previous state received by the reducer. as no such key defined in reducers.

Redux: Passing a preloadedstate with combined reducer and store enhancer

1 Answers