reactjs - 如何更新 Redux 工具包中的嵌套对象？

Question

我的初始状态如下所示:

const initialState: Todos = {
  todos: [
    {
      id: 1,
      completed: true,
      title: "setup redux",
      note: "test1",
      steps: [
        { id: 1, completed: true, title: "test2" },
        { id: 2, completed: false, title: "test2" }
      ]
    },
    {
      id: 2,
      completed: false,
      title: "using redux on typescript",
      note: "test3"
    }
  ]
};

所以现在我的问题是如何更新 Redux 工具包中的“step”属性？我做了一些研究知道有一种方法可以通过破坏我的对象来更新嵌套对象，但问题是如果我想更新我的“步骤”属性，我必须知道 todo[id] 和 steps[id] 来破坏我的对象，但我认为 redux 不允许一次传递两个 action.payload，所以我想知道该怎么做。

对于 delete 和 add 等其他 CRUD 操作，我创建了一个新的 Todo 并使用了 updateTodo 如下所示，但是因为我无法在不发送的情况下更改内部状态，所以我无法使用此方法更新步骤(有些更新像切换)，而且我认为这不是替换嵌套对象的好主意。

//Redux-todoSlice.tsx
updateTodo : (state,action:PayloadAction<Todo>)=>{
      state.todos = state.todos.map( (todo)=>
        todo.id === action.payload.id ? action.payload : todo
      )
    }

//------------In my components

const Rightbar: React.FC<rightbarProps> = ({ currentTodoId }) => {
const todos  = useSelector((state:RootState)=>
    state.todo.todos.filter((todo=>todo.id === currentTodoId))
);
 const currentTodo = todos[0]
#....somecode
const deleteStep = (id:number)=>{

     if (currentTodo.steps!==undefined){
      const newSteps = currentTodo?.steps.filter((step)=> step.id!==id)
      const newTodo:Todo = {...currentTodo,steps:newSteps}
      dispatch(updateTodo(newTodo)) 
     }
  }

那么有人知道对此有更好的方法吗？

Answer 1

您可以使用具有多个属性的对象作为负载。

你会做类似的事情

completeStep(state, action: PayloadAction<{ todoId: string, stepId: string }>) {
  const todo = state.todos.find(todo => todo.id == payload.action.todoId)
  if (todo) {
    const step = todo.steps.find(step => step.id == payload.action.stepId);
    if (step) {
      step.completed = true
    }
  }
}

进一步阅读:https://redux-toolkit.js.org/usage/immer-reducers