Question

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

我已经查找了“嵌套的归约器”，但是这些问题的解决方案似乎都与redux和combineReducers有关，而Hooks则没有。

Demo code（即使codeandbox再次关闭）：

它实际上并没有显示在codesandbox中（因为沙箱本身无法正常工作），但是在我自己的计算机上，单击Add按钮后，我得到了Uncaught TypeError: fruits.apples.map is not a function。但是，在此之前，map可以正常工作，并且所有项目均按预期方式呈现。

Answer 1

来这里寻找combineReducers()钩子的useReducer()函数的人，这可能对您有帮助

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;
  }

将此用作

const [state, dispatch] = useReducer(combineReducers(reducer1, reducer2), initialState)

Answer 2

您的代码中有一些错误，例如class而不是className，缺少了key属性。我修改了您的示例，看看here。

简化器为pure functions也是很重要的-当通过适当的操作触发更改时，始终返回新状态，而不会使先前的状态（和嵌套属性）发生变化。如果没有reducer无法处理该操作，则只需返回以前的状态-不要抛出reducer，这也会使其变得不纯。

形状的替代方法是让每个子级减速器负责整个状态树的某些子状态，以使其更具可伸缩性和可组合性（Link）。因此，一种还原剂可用于苹果，一种还原剂可用于香蕉和一种橙子（第一种水果类型，然后操作）。但是原则上，您可以根据自己的需要来处理形状。

希望，能帮上忙。

挂钩：使用useReducer时结合多个减速器？

2 个答案: