Redux reducers，对象键值

Question

我在我的redux商店中有hashMap，我想要更改孩子id: 2的isChecked值。像这样在state上运行是好的吗(在state上操作)？

我的hashMap

const childrens = {
  1: { name: "Test", isChecked: false },
  2: { name: "test2", isChecked: false }
};

这是我的减速器

export const childrensReducer = (state = childrens, action) => {
  switch (action.type) {
    case "SELECT_CHILDREN":
      const id = 2;
      state[id].isChecked = !state[id].isChecked;
      return { ...state };
  }
};

Answer 1

问题是，您正在使用下面的代码行改变reducer中的状态：

state[id].isChecked = !state[id].isChecked;

为什么redux需要不变性可以在官方文档中找到：

https://redux.js.org/faq/immutable-data

一种方法是：(我希望您通过action.id发送id )

    case "SELECT_CHILDREN":
      return {
        ...state,
        [action.id]: {
          ...state[action.id],
          isChecked: !state[action.id].isChecked
        }
      };

当数组用于状态时，这些类型的状态操作会更容易。

Answer 2

像您这样改变状态并不是一个好的做法。

有不同的方法来改变状态。请查看下面的链接以获取更多信息和示例。https://www.freecodecamp.org/news/handling-state-in-react-four-immutable-approaches-to-consider-d1f5c00249d5/

Answer 3

改变状态不是一个好的做法，因为react依赖于它的许多特性的不变性。

例如，考虑生命周期方法或比较状态/属性后的重新渲染(PureComponents)

变异状态的问题是，当这些值作为道具传递给子代时，您试图根据状态是否更新来对它们做出一些决定，以前的道具和当前的道具都将持有相同的值，因此比较可能会失败，从而导致应用程序出错

更新状态的正确方法是

case "SELECT_CHILDREN": 
  const id = 2;
  return {
    ...state,
    [id]: {
      ...state[id],
      isChecked: !state[id].isChecked
    }
  };