Redux Reducer - 중첩 된 상태에 새 데이터 추가

Question

다음 json 파일을 감속기의 클라이언트 상태로 저장했습니다. 이제 아약스를 통해 새로운 노트를 추가 할 때 기존 메모 배열에 새 노트를 추가하는 NEW_NOTE_SUCCESS 리듀서를 호출합니다. 내가 위를 한 후

export default function clientProfile(state={}, action) { 

    switch(action.type) { 


     case NEW_NOTE_SUCCESS: 
      console.log(action.payload); 
      return { ...state, notes: [...state.notes, action.payload] } 

     default: 
      return state; 
    } 

} 

그러나, this.props.client.notes은 새로운 I 추가 참고 있지만 오래된 사람이있을 것이다.

새 메모를 배열에 "푸시"해야 할 경우, 새 메모를 추가 할 때마다 메모 json 파일을 다시 보내지 않아도됩니다.

PS : action.payload에는 다음 JSON이 포함되어 있습니다.

{ 
      "noteId": "10000000", 
      "customerId": "34", 
      "createdBy": "1", 
      "created": "1510316194", 
      "note": "ADDED A NEW NOTE. NEED TO ADD TO STATE" 
     } 

이것은 초기로드의 원래 json 파일입니다.

{ 
    "customerId": "34", 
    "agentId": "1", 
    "createdDate": "1510223892", 
    "firstname": "John", 
    "lastname": "Doe", 
    "mobile": "123456789", 
    "address": "Something email here", 
    "notes": { 
     "0": { 
      "noteId": "1", 
      "customerId": "34", 
      "createdBy": "1", 
      "created": "1510316194", 
      "note": "add something" 
     }, 
     "1": { 
      "noteId": "2", 
      "customerId": "34", 
      "createdBy": "1", 
      "created": "1510316527", 
      "note": "add something" 
     }, 
     "2": { 
      "noteId": "3", 
      "customerId": "34", 
      "createdBy": "1", 
      "created": "1510317177", 
      "note": "add new thing" 
     }, 
     "3": { 
      "noteId": "4", 
      "customerId": "34", 
      "createdBy": "1", 
      "created": "1510318448", 
      "note": "something" 
     }, 
     "4": { 
      "noteId": "5", 
      "customerId": "34", 
      "createdBy": "1", 
      "created": "1510318476", 
      "note": "this would be note number 5, lets see whether we can get something from this." 
     } 
    } 
} 

업데이트 : Reducer Codes - Array 대신 Reducer Codes - Object.

case NEW_NOTE_COMPLETE: 
    return { ...state, notes: {...state.notes, action.payload.noteId: action.payload} } 

Answer 1

데이터 구조가 혼동스러워 보입니다.
json 파일에서 note 키는 object이지만 감속기 내부에는 array으로 처리됩니다.
그래서이 라인 :

return { ...state, notes: [...state.notes, action.payload] } 

더 같이 일해야 (난 그냥 키 5 당신이해야 하드 코딩 그것은 동적 어떻게 든 계산) :

return {...state, notes: {...state.notes, "5": action.payload}} 

편집
을 A와 귀하의 의견에 대한 후속 조치 :

어떻게 역동적으로 만드나요? LY 계산, 그 다음에 당신은 내가에 스 니펫을 업데이트 computed property names of es2015

[action.payload.noteId]: action.payload 

를 사용할 수 나를 변수

당신이 당신의 키로 noteId를 사용하려면 말할 수 사용하게 보인다되지 않습니다 설명합니다. 당신은`3`의 키 노트를 얻을 당신은 이미 키 노트를 받았을 때

const jsonObj = { 
 
    "customerId": "34", 
 
    "agentId": "1", 
 
    "createdDate": "1510223892", 
 
    "firstname": "John", 
 
    "lastname": "Doe", 
 
    "mobile": "123456789", 
 
    "address": "Something email here", 
 
    "notes": { 
 
    "0": { 
 
     "noteId": "1", 
 
     "customerId": "34", 
 
     "createdBy": "1", 
 
     "created": "1510316194", 
 
     "note": "add something" 
 
    }, 
 
    "1": { 
 
     "noteId": "2", 
 
     "customerId": "34", 
 
     "createdBy": "1", 
 
     "created": "1510316527", 
 
     "note": "add something" 
 
    }, 
 
    "2": { 
 
     "noteId": "3", 
 
     "customerId": "34", 
 
     "createdBy": "1", 
 
     "created": "1510317177", 
 
     "note": "add new thing" 
 
    }, 
 
    "3": { 
 
     "noteId": "4", 
 
     "customerId": "34", 
 
     "createdBy": "1", 
 
     "created": "1510318448", 
 
     "note": "something" 
 
    }, 
 
    "4": { 
 
     "noteId": "5", 
 
     "customerId": "34", 
 
     "createdBy": "1", 
 
     "created": "1510318476", 
 
     "note": "this would be note number 5, lets see whether we can get something from this." 
 
    } 
 
    } 
 
} 
 

 
const newNote = { 
 
    "noteId": "10000000", 
 
    "customerId": "34", 
 
    "createdBy": "1", 
 
    "created": "1510316194", 
 
    "note": "ADDED A NEW NOTE. NEED TO ADD TO STATE" 
 
} 
 
const action = { 
 
    type: 'NEW_NOTE_SUCCESS', 
 
    payload: newNote 
 
}; 
 

 
function clientProfile(state = {}, action) { 
 
    switch (action.type) { 
 
    case 'NEW_NOTE_SUCCESS': 
 
     { 
 
     return {...state, notes: {...state.notes, [action.payload.noteId]: action.payload 
 
      } 
 
     } 
 
     } 
 

 
    default: 
 
     return state; 
 
    } 
 
} 
 

 

 
let reducer = clientProfile(jsonObj, {type: ''}); 
 
console.log("before the change",reducer.notes) 
 
reducer = clientProfile(jsonObj, action); 
 
console.log("after the change",reducer.notes)