为什么我的复选框不使用 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 中不变性的完整指南的帖子。