如何处理 useReducer() 中的不纯函数

Question

>我需要在我的上下文状态下将数据从一个数组到另一个数组，我选择使用useReducer().这就是该动作的外观

case 'ADD_CATEGORY':{
if(state.catList.length>0){
let nextState = { ...state }; 
let catList = state.catList.filter(c => c.localeCompare(state.category)!==0);
let categories = state.categories;
categories.push (state.category);
nextState.categories = categories;
nextState.catList = catList;
console.log(state.category);
return nextState
}else return state;
}

这就是状态的样子

const initialState = {
towns:[],
name: '',
parish: '',
category: '',
townsToSubmit: [],
categories:[],
catList:[],
}

根据这个 github 问题，如果我正确读取线程，我应该期望 useReducer(( 调用两次，因为 react 应用程序使用的是严格模式，并且它是为了查看我的代码是否会导致副作用。 添加到数组时如何做到这一点。

这导致的主要问题是我的数组最终重复了元素，因为它们总是被添加两次。由于 StrictMode 应该帮助检测副作用，它们是将数据添加到数组的更好方法吗？

Answer 1

由于 Redux 的创建者一遍又一遍地强调，您的化简器需要是纯粹的。{ ...state }创建state的浅表副本，因此如果您修改状态中任何引用类型的值(例如，通过在数组上使用.push()(，该更改将在上一版本的状态和下一个版本中发生。如果由于严格模式而重复两次相同的修改，则意味着您有问题。

因此，仅使用纯操作：

case 'ADD_CATEGORY':{
if(state.catList.length > 0) {
return {
...state,
catList: state.catList.filter(c => c.localeCompare(state.category) !== 0),
categories: [...state.categories, state.category],
};
}
return state;
}