在 Redux Reducer 中添加 item 2 层级

Question

我正在尝试向任务对象添加注释，但到目前为止我已经将它添加到所有任务中。当我尝试不同的方式时，它不会编译。 Object.assign 不喜欢在 .push()

之后出现

当它添加到所有任务时：

 let taskReducer = function(tasks = [], action) {
  switch (action.type) {
    case 'ADD_NOTE':
      return tasks.map((task) => {
        const { notes } = task;
        const { text } = action;
        notes.push({
           text,
           id: notes.length,
         })
          return task.id === action.id ?
            Object.assign({}, { task, notes }) : task
        })

不编译时：

let taskReducer = function(tasks = [], action) {
  switch (action.type) {
    case 'ADD_NOTE':
      return tasks.map((task) => {
       return task.id === action.id ?
        const { notes } = task;
        const { text } = action;
        notes.push({
           text,
           id: notes.length,
         })
           Object.assign({}, { task, notes }) : task
        })

Answer 1

你几乎不想在 reducer 中使用 Array.push()，因为这会直接改变现有数组，而直接改变通常会破坏 UI 更新（参见 Redux FAQ）。您可以在旧数组的 新副本 上使用 push()，但大多数示例不使用该方法。大多数时候，建议的方法是使用 const newArray = oldArray.concat(newValue)，其中 returns 包含所有旧项和新项的新数组引用。

除此之外，请记住，在不可变地更新嵌套数据时，每个级嵌套都需要创建并返回一个副本。

还没有实际测试过这个，但我认为你的代码应该大致像这个例子：

let taskReducer = function(tasks = [], action) {
    switch (action.type) {
        case 'ADD_NOTE':
            return tasks.map((task) => {
                if(action.id !== task.id) {
                    return task;
                }

                const { notes } = task;
                const { text } = action;
                const newNotes = notes.concat({id : notes.length, text});

                const newTask = Object.assign({}, task, {notes : newNotes});

                return newTask;
            }
        default : return tasks;
    }
}

在 Redux Reducer 中添加 item 2 层级

Adding item 2 levels deep in Redux Reducer

reactjs

redux

reducers