2017-09-05 5 views
0

내 API는 형태의 노드 목록을 반환하는 불변의 방법으로이 상태 변경을 처리하는 방법 :-돌아 오는 반응 -

[ 
    {id: '2', parentId: '1', name: 'baz' }, 
    {id: '3', parentId: '1', name: 'bar' }, 
    {id: '4', parentId: '5', name: 'foo' }, 
    ... 
] 

나는이 정보를 사용하여 트리 구조를 표시합니다.

현재 구현은 지정된 목록을 상태로 저장하고 내 감속기는 먼저 기존 상태의 복제본을 만든 다음 노드를 추가/업데이트/제거합니다.

그러나 내 반응 구성 요소는 하위 목록이 API 응답 (일부 응답이 아님)으로 전달되기를 기대하므로 최상위 구성 요소에서 상태를 가져 와서 필요한 형식으로 변환하고 전달합니다 대신 하위 구성 요소를 사용합니다. 부모의 목록에 저장된 각 자녀와 함께 나무의 해시 맵 버전 즉

{ 
    id: 0, name: 'root', 'children': [ 
     {id: '2', parentId: '1', name: 'baz', children: [{..., children: [...]}, {..., children: [...]}, ... }, 
    ...] 
} 

후 전달되는 외부 대부분의 개체를 인 트리의 루트 : 변환 된 트리의 형식은 하위.

이제 상태가 변경 될 때마다 저장된 상태가이 형식으로 변환되지만 많은 양의 노드가 있으면이 모든 재구성이 지연되어 모든 상태가 변경 될 수 있으므로이 상태로 직접 상태를 저장하려고합니다. 즉 state = root) API 응답을 한 번만 다시 구성하십시오.

불변의 방법으로 상태 변경을 수행하는 방법을 잘 모르겠다. 노드 계층 구조의 깊숙한 곳에있는 특정 노드에 새 자식을 추가하려고합니다. 변경 가능한 방식으로 이렇게하는 것이 쉽습니다. 간단히 말해서 자식을 부모 노드의 자식 목록으로 푸시하지만, 어떻게 할 수 있습니까?

또는 다른 방법은 무엇입니까?

+0

사용 Object.assign을 사용하는 것이 좋습니다 것입니다. 또는 배열로. Array.from (새로운 세트 (array.concat (newArray)) –

답변

관련 문제