Redux Reducerの項目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

あなたがほとんどありません減速機でArray.push()を使用したいのは、それが既存の配列を直接変異させ、直接的な変異が一般的にUI更新を破るためです（http://redux.js.org/docs/FAQ.html#react-not-rerendering参照）。 push()新しいアレイ旧アレイの新しいコピーを使用することができますが、ほとんどの例ではこのアプローチを使用していません。ほとんどの場合、提案された方法はconst newArray = oldArray.concat(newValue)を使用することです。これは、すべての古い項目と新しい項目を含む新しい配列参照を返します。

それ以外の場合、ネストされたデータを永久に更新するときは、のすべてののレベルでコピーを作成して返す必要があることに注意してください。

は、実際にこれをテストしていませんが、私はあなたのコードは大体この例のように見えるために必要だと思います。本当にありがとうございました

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; 
    } 
}