Question

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

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

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

这是我的简单动作

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

以下reducer可以在我将 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 属性设置为数组时，以下reducer无效。（根据我在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中更新对象数组中的嵌套props

1 个答案: