React Redux 意外键传递给创建商店

IT技术 javascript reactjs redux
2021-04-28 12:05:42

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

根减速器:

 import { combineReducers } from 'redux';
 import { routerReducer } from 'react-router-redux';
 import marvelReducer from './marvelReducer';

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

奇迹减速器:

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个回答

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

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

而且,将状态树变量持有者命名为其中不包含 reducer 的有意义的名称也是一个好主意,因此请更新

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

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

这应该对你有用。

希望这可以帮助,

附注。一些文档。

文档

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

如果您不需要处理与one相关的任何操作two,只需最初将它们拉入,这可能很简单

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

文档combineReducers

combineReducers辅助函数变成一个对象,其值是不同的减少功能为可以传递到单个减小功能createStore

生成的减速器调用每个子减速器,并将它们的结果收集到单个状态对象中。状态对象的形状与传递的键匹配reducers

简而言之,您的减速器被配置为以以下形式处理状态

{
    marvelReducer,
    routing
}

但是您以以下形式为其提供初始状态

{
    characters
}

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

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

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

当你组合 reducer 时,你必须将 state 对象的每个属性映射到不同的 reducer

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

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

我花了整晚才弄明白这一点,希望这条小评论能拯救你。

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

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