Redux: Unexpected key found in preloadedState argument passed to createStore

Question

Can you help me with the exception Unexpected key "userName" found in preloadedState argument passed to createStore. Expected to find one of the known reducer keys instead: "default". Unexpected keys will be ignored. Unexpected key "userName" found in preloadedState argument passed to createStore. Expected to find one of the known reducer keys instead: "default". Unexpected keys will be ignored.

I found this link , but it doesn’t help me. I'm not upset about something, maybe this part from the documentation: a simple object with the same form as the keys passed to it

Can you pass me my error on my example?

 import React from "react"; import ReactDOM from "react-dom"; import { Provider } from 'react-redux'; import { createStore, combineReducers, applyMiddleware } from 'redux'; import App from './containers/App.jsx'; import * as reducers from './reducers' import types from './constants/actions'; const reducer = combineReducers(reducers); const destination = document.querySelector("#container"); var store = createStore(reducer, { userName : '' }); ReactDOM.render( <Provider store={store}> <App/> </Provider>, destination ); console.log(1) store.subscribe( ()=> { console.log("-------------------------") let s = store.getState() console.log("STATE = " + s) for (var k in s) { if (s.hasOwnProperty(k)) { console.log("k = " + k + "; value = " + s[k]); } } }) store.dispatch({ type: types.LOAD_USER_NAME, userName : "Oppps1" }) 

my gearbox:

 import types from './../constants/actions' export default function userNameReducer (state = {userName : 'N/A'}, action) { console.log('inside reducer'); switch (action.type) { case types.LOAD_USER_NAME: console.log("!!!!!!!!!!!!!!!") console.log("action.userName = " + action.userName) for (var k in state) { if (state.hasOwnProperty(k)) { console.log("k = " + k + "; value = " + state[k]); } } return action.userName; default: return state } } 

execute the console after execution:

Answer 1

TL; DR: Stop using combineReducers and pass the reducer to createStore directly. Use import reducer from './blabla' instead of import * from './blabla' .

The second argument to createStore (preloaded state) should 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 export your reducer using export default , which translates 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 does not have a default property, so reduction is complaining. If you use import reducer from './blabla' , you get instead module.exports.default , which is equal to your reducer.

Here is more information on how the ES6 module module from MDN works.

Reading combineReducers docs from redux can also help.