在 Redux reducer 中更新对象中的值答案

【问题标题】：Updating a value in an object in Redux reducer在 Redux reducer 中更新对象中的值
【发布时间】：2020-06-22 14:34:58
【问题描述】：

我希望根据用户输入更新嵌套对象中的值。例如，如果用户选择更新他们的国家和街道，只有这些值将作为 action.payload 传递给 reducer 并更新（其余状态将保持不变）。我提供了我的初始状态和减速器：

我的状态：

const initialState = {
  userData: [
    {
      firstName: "",
      lastName: "",
      country: "",
      address: {
        street: "",
        houseNumber: "",
        postalCode: "",
      }
    }
 ],
  error: null,
};


export default (state = initialState, action) => {
  switch (action.type) {
    case GET_USER_DATA:
      return { ...state, userData: action.payload };
    case UPDATE_USER_DATA:
      return {
        ...state,
        userData: [{
          ...state.userData,
          ...action.payload,
       }]
      };
    default:
      return state;
  }
};

任何帮助都会很棒，谢谢！

【问题讨论】：

那么你需要什么？你已经有了reducer，你有什么错误吗？
我能够找到问题所在，但是在以后的问题中，您应该使问题和问题更加清晰。这里实际上没有问题，这使得人们很难提供帮助。

标签： reactjs redux react-redux redux-reducers

【解决方案1】：

您似乎不需要包装对象的数组。如果这是真的，为简单起见将其删除。然后userData 变成一个普通对象，你的更新变成：

return {
  ...state,
  userData: { // <- no wrapping array, just update the object
    ...state.userData,
    ...action.payload,
  }
};

由于存在数组，因此您需要在正确的索引处解构对象。

return {
  ...state,
  userData: [{
    ...state.userData[0], // <- destructure the object, not the array
    ...action.payload,
  }]
};

如果您确实需要该数组，并且会有多个对象，您还需要在操作有效负载中传递一个标识符，以便知道要更新哪个索引，但根据当前信息，这是最可能的完整答案。

【讨论】：