在 Redux reducer 中更新对象数组中的嵌套道具

Question

这是我保存在 redux store 中的最终数据签名。

const finalDataFormInReduxStore = {
  "id": "123",
  "id_details": [
    {
      "user_city": "SF",

    },
    {
      "user_city": "SF",
    }
}

这是我的简单操作

export const updateUserCity = (index, city) => {
  return {
    type: UPDATE_USER,
    payload: {
      index,
      city
    }
  };
};

以下减速器在我将 id_details 属性设为对象的地方工作（但是根据我在 redux 存储中的目标数据签名，我希望这个道具是一个数组。)

case UPDATE_USER :  {
  return {
    ...state,
      id_details: {
        ...state.id_details,
        [actions.payload.index]: {
          ...state.id_details[actions.payload.index],
          user_city: actions.payload.city
        }
      }
  };
}

但是，当我将 id_details 属性设为数组时，以下减速器不起作用. （根据我在 redux 存储中的目标数据签名，这是我想要的。）

case UPDATE_USER :  {
  return {
    ...state,
      id_details: [
        ...state.id_details,
        [actions.payload.index]: {
          ...state.id_details[actions.payload.index],
          user_city: actions.payload.city
        }
      ]
  };
}

我已查看此 github issue page 以寻求指导，但没有帮助我。可能我在这里遗漏了一些基本的东西。

Answer 1

从 https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns#updating-an-item-in-an-array 开始，最简单的方法是映射数组：

case UPDATE_USER : {
  return {
    ...state,
    id_details: state.id_details.map((item, index) => {
      if (index === actions.payload.index) {
        return {...item, user_city: actions.payload.city};
      }
      return item;
    }),
  };
}

在 Redux reducer 中更新对象数组中的嵌套道具

Update nested props in array of objects in Redux reducer

object

immutability

redux

react-redux