React Redux意外密钥传递给创建商店

时间:2016-06-23 17:33:53

标签: javascript reactjs redux

我收到错误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;
  }
}

商店:

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;

我在另一个应用程序中有非常相似的代码,它工作正常。不确定这里发生了什么

4 个答案:

答案 0 :(得分:9)

您设置为商店的初始状态与您告诉商店预期商店的初始状态应该是什么之间存在小的不匹配,例如: - 更新商店的初始状态设置:

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

将状态树变量持有者命名为不包含reducer的有意义名称也是一个好主意,所以更新

const rootReducer = combineReducers({
   marvelReducer,
   routing: routerReducer
});

const rootReducer = combineReducers({
   marvel: marvelReducer,
   routing: routerReducer
});

这应该可以帮到你。

希望这有帮助,

PS。一些文档。

来自the docs

  

如果使用combineReducers生成reducer,则它必须是一个普通对象,其形状与传递给它的键相同。否则,您可以自由地传递减速器可以理解的任何内容。

如果您不需要处理与onetwo相关的任何操作,请先将它们拉进去,这可能就像

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

答案 1 :(得分:1)

要添加到有效答案中, 存储状态对象具有不同的属性或不同的数据部分:

instantiateViewController(withIdentifier:_)

组合归约器时,必须将状态对象的每个属性映射到不同的归约器

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

这是redux中的一种机制,用于对每个化简器强制进行数据关注分离,reducerOfDataA无法修改reducerOfDataB的数据。 这意味着reducerOfDataA的所有数据必须位于{a:...}下,并且不能直接在根状态对象{partA1:...,partA2:...}上根据不同的属性进行划分

整夜把我弄清楚,希望这个小评论能保存您的意见。

答案 2 :(得分:0)

我有同样的问题,我无法遵循任何这些潜在解决方案的逻辑。

combineReducers的参数是对reducer对象的引用,而不是state,keys。关键错误与大多数其他redux错误一样神秘,实际上大多数答案或潜在解决方案都提供给他们。

答案 3 :(得分:-1)

来自combineReducers的{​​{3}}:

  

combineReducers辅助函数转换其值为的对象   将不同的还原功能集成到单个还原功能中即可   传递给createStore

     

生成的减速器调用每个儿童减速器,然后收集它们   结果成一个状态对象。 状态对象的形状   匹配传递的reducers 的键。

简而言之,您的Reducer配置为以

的形式处理状态
{
    marvelReducer,
    routing
}

但是你正在以

的形式处理初始状态
{
    characters
}

要解决此问题,您必须更改传递给combineReducers的对象的键以包含characters,或者更改初始状态以包含您的reducer所期望的键。