为什么我的复选框不使用 Redux 更新？

Question

我正在开发一个使用 Redux 来管理状态的 React-Native 移动应用程序。我有过滤器来管理显示的数据。

我正在使用 Redux 来管理过滤器中的所有数据。

这很简单：我点击复选框，它就会被点击。我再次单击该复选框（猜猜是什么），它没有被单击。当存在值为“allInclusive”的框时，除“allInclusive”以外的所有框均未选中。

这是减速器的代码和复选框的代码。

var comparators = {...state.comparators};

      if (!comparators[action.payload.comparator]) {

        comparators[action.payload.comparator] = {};

        comparators[action.payload.comparator][action.payload.name] = [action.payload.value];

      } else {

        if (!comparators[action.payload.comparator][action.payload.name]) {

          comparators[action.payload.comparator][action.payload.name] = [action.payload.value];

        } else {

          if (comparators[action.payload.comparator][action.payload.name].includes(action.payload.value)) {

            comparators[action.payload.comparator][action.payload.name] = comparators[action.payload.comparator][action.payload.name].filter(value => value !== action.payload.value);

          } else {

            comparators[action.payload.comparator][action.payload.name].push(action.payload.value);

          }

        }

      }

      return Object.assign({}, state, {

        comparators,

      });

Answer 1

这是重写为不可变的减速器： const { comparators } = state;  const { comparator, name, value } = action.payload;  if (!comparators[comparator]) {    return {      ...state,      comparators: {        [comparator]: {          [name]: value        }      }    };  } else {    return !comparators[comparator][name]      ? {          ...state,          comparators: {            [comparator]: {              [name]: value            }          }        }      : comparators[comparator][name].includes([value])      ? {          ...state,          comparators: {            [name]: comparators[comparator][name].filter(val2 => val2 !== value)          }        }      : {          ...state,          comparators: {            [comparator]: {              [name]: [...comparators.comparator.name, value]            }          }        };  }

Answer 2

您正在改变 reducer 中的状态，因为您只是复制顶级对象，然后改变嵌套在其中的内容。不可变更新总是需要为对象和数组复制每一层嵌套。编写 Redux 逻辑的第一条规则是：不要改变状态。您应该改用我们的官方 Redux Toolkit 包。它不仅会捕捉到这些意外突变并警告您，createSliceAPI 还允许您实际编写“突变”代码，这些代码会变成安全、正确的不可变更新。您还应该花时间阅读关于“不可变更新模式”的 Redux 文档页面，以及 Dave Ceddia 关于React 和 Redux 中不变性的完整指南的帖子。