연관 배열에서 중첩 된 객체의 특정 속성 하나만 업데이트하는 방법

Question

연관 배열이 있습니다.
키 (숫자)와 값 (개체)입니다.
이 배열의 상태를 그대로 유지해야합니다. 하나의 개체 속성 만 업데이트하면됩니다. 배열의
예 :

5678: {OrderId: 1, Title: "Example 1", Users: [{UserId: 1}, {UserId: 2}, {UserId: 3}]} 
5679: {OrderId: 2, Title: "Example 2", Users: [{UserId: 1}, {UserId: 2}, {UserId: 3}]} 

나는 Users 배열 속성을 업데이트해야합니다.
나는이 시도했지만 작동하지 않습니다

ordersAssociativeArray: { 
     ...state.ordersAssociativeArray, 
     [action.key]: { 
      ...state.ordersAssociativeArray[action.key], 
      Users: action.updatedUsers 
     } 
     } 

이 데이터는 감속기 안에 있습니다.
어떻게 수정 했습니까?

도움이 될만한 것.
하기 전에 :

ordersAssociativeArray:Array(22) > 5678: Order {OrderId: ...} 

후 : 내가 크롬의 값을 검사 할 때
나는 위의 내 코드의 실행 후 이전 값과 값 확인에

ordersAssociativeArray: > 5678: {OrderId: ...} 

솔루션 (코드 내 감속기)

let temp = Object.assign([], state.ordersAssociativeArray); 
temp[action.key].Users = action.updatedUsers; 
return { 
     ...state, 
     ordersAssociativeArray: temp 
} 

이 코드는 정상적으로 작동합니다. 하지만 왜 아직도 이해가 안되나요? 그래서 해결책이 있지만 누군가가 나에게이 방법이 왜 효과가 있고 왜 그렇지 않은지를 설명 할 수 있다면 좋겠습니까?
내가 initialy이 연관 배열에 물건을 올려 어떻게 여기에 도움이 될 수있는 경우 :

ordersAssociativeArray[someID] = someObject // this object is created by 'new Order(par1, par2 etc.)' 

Answer 1

this fiddle에 의해 설명 된대로 수행중인 작업이 정확합니다. 코드에 다른 문제가있을 수 있습니다.

내가 당신에게 권장 할만한 점은 감속기를 ordersReducer과 orderReducer의 두 가지 기능으로 구분하는 것입니다. 이렇게하면 도트가 과도하게 사용되는 것을 피할 수 있습니다. 이로 인해 코드의 정확성이 의심 될 수 있습니다. 같은

예를 들어

, 뭔가 :

const ordersReducer = (state, action) => { 
    const order = state[action.key] 

    return { 
    ...state, 
    [action.key]: orderReducer(order, action) 
    } 
} 

const orderReducer = (state, action) => { 
    return { 
    ...state, 
    Users: action.updatedUsers 
    } 
} 

나는 당신이 당신의 버그를 발견 바랍니다! 솔루션에서

업데이트

당신은 let temp = Object.assign([], state.ordersAssociativeArray);를 사용합니다. 이것은 괜찮지 만 숫자로 색인을 작성하는 경우에도 {}을 사용하는 것이 더 바람직하다는 것을 알아야한다고 생각했습니다.

id가 누락 된 경우 js 배열의 색인에 여전히 undefined 항목이 있기 때문에 javascript의 배열은 정규화 된 데이터를 나타내는 데 적합하지 않습니다. 예를 들어,

const orders = [] 
array[5000] = 1 // now my array has 4999 undefined entries 

정수 키가있는 개체를 사용하는 경우 단단히 묶인 항목을 얻을 수 있습니다.

const orders = {} 
orders[5000] = 1 // { 5000: 1 } no undefined entries 

여기 약 normalizing state shape에 관한 기사입니다. 원래 예제의 배열을 사용하는 방법에서 users1과 같은 키를 사용하여 개체를 마이그레이션하는 방법에 유의하십시오.

Answer 2

문제는 당신이 상태에서 배열을 사용하고 있지만, 감속기 당신이 개체로 옮기고 있다고 할 수있다. 시도해보십시오 :

ordersAssociativeArray: [  //an array and not an object 
    ...state.ordersAssociativeArray, 
    [action.key]: { 
     ...state.ordersAssociativeArray[action.key], 
     Users: action.updatedUsers 
    } 
] 

그러면 상태가 아니라 객체가 주문 배열에 배치됩니다.