Question

当我直接使用redux reducer时，我得到了预期的状态：

import cheese from 'reducers/cheese.js';

const store = createStore( cheese );

<Provider store={ store } >
   ...
</Provider>

结果：

cheese: "cheddar"

但是当我使用combineReducer时，我得到一个嵌套状态

import cheese from 'reducers/cheese.js';
import crackers from 'reducers/crackers.js';

const reducer = combineReducers({ cheese, crackers });

const store = createStore( reducer );

<Provider store={ store } >
  ...
</Provider>

结果：

cheese: { cheese: "cheddar" }

这导致浅状态比较验证，我的组件不会更新。（编辑：这个假设可能是假的）

修改

我想要的状态看起来像这样（使用单个减速器时的样子）：

{
cheese: "cheddar",
crackers: "ritz"
}

修改

我的减速器看起来像这样（两者都相同）：

const initialState = {
  cheese: 'cheddar'
};

export default function reducer( state = initialState, action = {} ) {
  switch ( action.type ) {
    case 'newCheese':
      console.log(action.newCheese); // "cheddar"
      return {
        ...state,
        cheese: action.newCheese 
      };
  default:
    return state;
  }
}

Answer 1

combineReducers接受一个对象 - 尝试：

const reducer = combineReducers({ cheese, crackers });

使用redux combineReducers创建一个嵌套状态

1 个答案: