Respond to an unexpected Redux key to create storage

Question

I get an error Unexpected key "characters" found in initialState argument passed to createStore. Expected to find one of the known reducer keys instead: "marvelReducer", "routing". Unexpected keys will be ignored. Unexpected key "characters" found in initialState argument passed to createStore. Expected to find one of the known reducer keys instead: "marvelReducer", "routing". Unexpected keys will be ignored.

rootReducer:

  import { combineReducers } from 'redux'; import { routerReducer } from 'react-router-redux'; import marvelReducer from './marvelReducer'; const rootReducer = combineReducers({ marvelReducer, routing: routerReducer }); export default rootReducer; 

marvelReducer:

 import { FETCH_MARVEL } from '../constants/constants'; import objectAssign from 'object-assign'; export default function marvelReducer(state = [], action) { switch (action.type) { case FETCH_MARVEL: return objectAssign({}, state, {characters: action.data}); default: return state; } } 

store:

 import { createStore } from 'redux'; import { syncHistoryWithStore } from 'react-router-redux'; import { browserHistory } from 'react-router'; import rootReducer from '../reducers/index'; const initialState = { characters: [] }; const store = createStore(rootReducer, initialState); export const history = syncHistoryWithStore(browserHistory, store); if (module.hot) { module.hot.accept('../reducers/', () => { const nextRootReducer = require('../reducers/index').default; store.replaceReducer(nextRootReducer); }); } export default store; 

I have very similar code in another application and it works fine. Not sure what is going on here.

Answer 1

There is a slight discrepancy 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, for example. - update the initial state for the repository as such:

 const initialState = { marvel: { characters: [] } }; 

And it's also nice to name state tree variable holders by meaningful names that don't have a 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 documents.

From the docs :

If you created a reducer with combReducers, it should be a simple object with the same shape as the keys passed to it. Otherwise, you can transfer everything your gearbox can understand.

If you don’t need to handle any actions related to one or two , just pull them out initially, it can be as simple as

 export default combineReducers({ events, flash, one: (state = {}) => state, two: (state = {}) => state }) 

Answer 2

To add an answer to elod, the storage state object has different properties or different data sections:

 {a:data,b:data,c:data} 

When you combine gears, you MUST map each property of the state object to another gear

 {a:reducerOfDataA,b:reducerOfDataB,c:reducerOfDataC} 

This is a mechanism in Redux that provides data sharing for each reducer; reducerOfDataA cannot modify reducerOfDataB data. This means that all reducerOfDataA data must be in {a: ...} and not shared under various properties directly in the root state object {partA1: ..., partA2: ...}

I spent all night to figure it out, hope this little comment saves yours.

Answer 3

I have the same problem and cannot follow the logic of any of these potential solutions.

The arguments for combReducers are references to gear objects, not states, keys. The key error is just as mysterious as most of the other pruning errors, and indeed most of the answers or potential solutions offered to them.

Answer 4

From the documentation for combineReducers :

The auxiliary function combineReducers turns an object whose values ​​various reduction functions into a single reduction function, go to createStore .

The resulting reducer calls each child reducer and collects their results into a single state object. The shape of the state object corresponds to the keys of the passed reducers .

In short, your gearboxes are configured to handle state in the form

 { marvelReducer, routing } 

But you give him the initial state in the form

 { characters } 

To fix this problem, you will either have to change the keys of the object you are passing to combineReducers to enable characters , or change the initial state to contain the keys that your reducers expect.