React Redux unexpected key passed to create store
There's a small mismatch between what you set as the initial state of the store and what you tell the store to expect what the initial state of the store should be, e.g. - update your initial state setting for the store as such:
const initialState = {
marvel: {
characters: []
}
};
And also it's a good idea to name your state tree variable holders to meaningful names that do not contain reducer in them, so update
const rootReducer = combineReducers({
marvelReducer,
routing: routerReducer
});
to
const rootReducer = combineReducers({
marvel: marvelReducer,
routing: routerReducer
});
And that should do the trick for you.
Hope this helps,
PS. some docs.
From the docs:
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.
If you don't need to handle any actions related to one
or two
, just pull them in initially, this could be as simple as
export default combineReducers({
events,
flash,
one: (state = {}) => state,
two: (state = {}) => state
})
From the documentation for combineReducers
:
The
combineReducers
helper function turns an object whose values are different reducing functions into a single reducing function you can pass tocreateStore
.The resulting reducer calls every child reducer, and gathers their results into a single state object. The shape of the state object matches the keys of the passed
reducers
.
In short, your reducers are configured to handle a state in the form of
{
marvelReducer,
routing
}
But you are handing it an initial state in the form of
{
characters
}
To fix this issue, you will either have to change the keys of the object you pass to combineReducers
to include characters
, or change the initial state to contain the keys that your reducers are expecting.