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