reactjs - Hook : combine multiple reducers when using useReducer?

Question

我想在作为第一个参数传递给 useReducer 的主 reducer 中使用嵌套的 reducer ，而不是使用嵌套的 switch 语句(你甚至可以这样做吗？)。这是因为我的reducer函数依赖于多个switch(第一个操作，然后是水果类型)。

我查过“嵌套化简器”，但这些问题的解决方案似乎都与 redux 和 combineReducers 相关，其中 Hooks 没有等效项。

Demo code (尽管codesandbox再次关闭):

它实际上并没有显示在codesandbox中(因为沙箱本身无法正常工作)，但在我自己的机器上，我得到Uncaught TypeError:fruits.apples.map is not a function我单击“添加”按钮。但是，在此之前，map 工作正常并且所有项目都按预期呈现。

Answer 1

那些来这里寻找 combineReducers() 函数来实现 useReducer() 钩子(Hook)的人，这可能会对您有所帮助

const combineReducers = (...reducers: Function[]) => 
  (state: any = initialState, action: any): any => {
    for(let i=0;i<reducers.length;i++) 
      state = reducers[i](state, action)
    return state;
  }

将此用作

// At module level, so the combined function doesn't change.
const combinedReducer = combineReducers(reducer1, reducer2);

// Inside your component.
const [state, dispatch] = useReducer(combinedReducer, initialState)

编辑:我最近喜欢reduce函数，我认为这是更干净的实现方式

const combineReducers = (...reducers) => 
  (state, action) => 
    reducers.reduce((newState, reducer) =>
         reducer(newState, action), state)