Hinzufügen von 2 Ebenen tief in Redux Reducer

Question

Ich versuche, Notizen zu einem Aufgabenobjekt hinzuzufügen, aber was ich bis jetzt hinzugefügt habe, fügt es allen Aufgaben hinzu. Wenn ich verschiedene Möglichkeiten ausprobiere, kompiliert es nicht. Die Object.assign nicht wie nach dem .push kommen()

Wenn es um alle Aufgaben ergänzt:

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

Wenn es nicht kompiliert:

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

Sie

fast nie möchte Array.push() in einem Reducer verwenden, da das bestehende Array direkt mutiert und direkte Mutationen im Allgemeinen die UI-Aktualisierungen unterbrechen (siehe http://redux.js.org/docs/FAQ.html#react-not-rerendering). Sie könnte verwenden push() auf eine neue Kopie des alten Array, aber die meisten Beispiele verwenden diesen Ansatz nicht. In den meisten Fällen wird die Methode const newArray = oldArray.concat(newValue) verwendet, die eine neue Array-Referenz mit allen alten Elementen und dem neuen Element zurückgibt.

Darüber hinaus beachten Sie, dass bei der Aktualisierung verschachtelten Daten unveränderlich alle Ebene der Verschachtelung muss eine Kopie gemacht und zurückgegeben werden.

Haben Sie nicht eigentlich diese getestet, aber ich denke, der Code in etwa wie in diesem Beispiel aussehen muss:

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