내 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 응답을 한 번만 다시 구성하십시오.
불변의 방법으로 상태 변경을 수행하는 방법을 잘 모르겠다. 노드 계층 구조의 깊숙한 곳에있는 특정 노드에 새 자식을 추가하려고합니다. 변경 가능한 방식으로 이렇게하는 것이 쉽습니다. 간단히 말해서 자식을 부모 노드의 자식 목록으로 푸시하지만, 어떻게 할 수 있습니까?
또는 다른 방법은 무엇입니까?
사용 Object.assign을 사용하는 것이 좋습니다 것입니다. 또는 배열로. Array.from (새로운 세트 (array.concat (newArray)) –