Question

鉴于收集：

const peeps = [ {name: 'John', id: 1}, {name: 'Paul', id: 2}, {name: 'George', id: 3}, {name: 'Pete', id: 4} ];

使用id: 4查找项目的建议方法是什么，并在Redux商店中将名称Pete更新为Ringo，没有突变？

编辑：我知道改变对象的形状（使用带有ID键的对象）会比数组更好，但我无法控制数据的形状，必须使用上面的形状。

Answer 1

您想在reducer中使用.map()方法。您的操作将包含id的有效内容，该有效内容是要更新的peep的ID，以及用于更新的newName。

您的peeps州：

const state = [
  {name: 'John', id: 1},
  {name: 'Paul', id: 2},
  {name: 'George', id: 3},
  {name: 'Pete', id: 4}
];

您的操作创建者将采用id和newName参数并与他们一起创建操作：

const updateName = (id, newName) => {
  return {
    type: 'UPDATE_NAME',
    payload: {
      id
      newName
    }
  };
};

您可以发送以下操作：

dispatch(updateName(4, 'Ringo'));

您的reducer将收到您的操作，并使用提供的id和newName来映射所有peeps，找到与给定id匹配的那个并更新其name等于传入的newName。

const peeps = (state = [], action) => {
  switch (action.type) {
    case 'UPDATE_NAME':
      const { id, newName } = action.payload;

      // This returns a new array instead of mutating the old one
      return state.map(peep => {
        if (peep.id === id) {
          peep.name = newName;
        }
        return peep;
      });
    default:
      return state;
  }
};

在Redux商店中查找和更新项目（在集合中）

1 个答案: