javascript - 在redux中，使用combineReducers预加载状态

Question

我刚刚开始接触 redux，并且在一段时间内遇到了预加载状态的问题。

当使用单个 reducer 时，我使用了以下代码，并且它曾经工作正常。相关片段::

const head = (state = {}, action) => {
 switch (action.type) {

  case 'TOGGLE_VISIBLITY':
    if (state.head.content !== action.id) {
      return state
    }
    state.body.visible = !state.body.visible;
    return state;

    default:
      return state
    } 
 }

const heads = (state = [], action) => {
   switch (action.type) {
      case 'TOGGLE_VISIBLITY':
  state.body = state.body.map(t =>
    head(t, action)
  );
 }
 return state;
}

export const store = createStore(heads, config);

但是我只是将其更改为combinerReducers，并且它开始抛出JS错误。

Unexpected keys "head", "body" found in preloadedState argument passed to createStore. Expected to find one of the known reducer keys instead: "heads". Unexpected keys will be ignored.

我的改变是::

const plannerApp = combineReducers({
   heads
});

export const store = createStore(plannerApp, config);

如果您想查看完整代码，请访问here .

任何帮助都是非常值得赞赏的。预先非常感谢...我感谢您的时间和努力...

Answer 1

简而言之，预加载状态需要与 reducer 的结构相匹配。自从您改用 combineReducers 以来，您的状态树结构已经发生了变化。您现在有一个顶级键 heads，它有一个子键 body，因此您可能需要更新您的 config，如下所示:

export default {
  heads: {
    body: {
      ...

现在，config对象包含head和body的顶级键，它们在顶级没有条目你的状态树。