Redux如何在状态中插入新的子数据

Question

我正在制作一个todo应用，并使用redux进行状态管理。我的待办事项由嵌套阵列组成。

const initialState = {
  todos: [
    {
      id: 1,
      name: "task1",
      subdata: [
        {
          id: 101,
          name: "subtask1",
          complete: false,
        },
        {
          id: 102,
          name: "subtask2",
          complete: true,
        },
      ],
    },
    {
      id: 2,
      name: "task2",
      subdata: [
        {
          id: 103,
          name: "subtask3",
          complete: false,
        },
        {
          id: 104,
          name: "subtask4",
          complete: true,
        },
      ],
    },

还原器：

export default function reducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      const newTodo = state.todos.concat(action.payload);
      return { ...state, todos: newTodo };

    case ADD_SUBTODO:
      const newSubtodo = action.payload;
?????????????????????????????????????????????

如何将新的Subtodo附加到初始状态？ 我使用了沉浸库，但我想以传统的方式进行操作，例如传播操作员。如果您提供帮助，我会很高兴。

Answer 1

你可以做类似...

// send payload as {id:1,newSubtodo: newSubtodo} 
case ADD_SUBTODO:
      const newSubtodo = action.payload.newSubtodo;
      //id is the task/todo id of which you want to add a new subdata
      const newTask = initialState.todos.find(i=>i.id==action.payload.id) 
      //id is the task/todo id of which you want to add a new subdata
      newTask.subdata.push(newSubtodo) 
      return {...initialState,todos:[...initialState.todos,newTask]}

注意：将嵌套对象用作react js中的状态不是一个好
练习。