Redux: Unexpected key found in preloadedState argument passed to createStore
TLDR: stop using combineReducers
and pass your reducer to createStore
directly. Use import reducer from './foo'
instead of import * from './foo'
.
Example with default import/export, no combineReducers
:
// foo.js
function reducer(state, action) { return state; }
export default reducer;
----
// index.js
import myReducer from './foo';
Example with combineReducers
// foo.js
export default (state, action) => { ... }
----
// bar.js
export default (state, action) => { ... }
----
// index.js
import foo from './foo';
import bar from './bar';
const store = createStore(combineReducers({
foo,
bar,
});
The second argument of createStore
(preloaded state) must have the same object structure as your combined reducers. combineReducers
takes an object, and applies each reducer that is provided in the object to the corresponding state property. Now you are exporting your reducer using export default
, which is transpiled to something like module.exports.default = yourReducer
. When you import the reducer, you get module.exports
, which is equal to {default: yourReducer}
. Your preloaded state doesn't have a default
property thus redux complains. If you use import reducer from './blabla'
you get module.exports.default
instead which is equal to your reducer.
Here's more info on how ES6 module system works from MDN.
Reading combineReducers docs from redux may also help.
Or just:
import yesReducer from './yesReducer';
const store = createStore(combineReducers({
yesReducer,
noReducer: (state = {}) => state,
});