-React Redux - Comment gérer ce changement d'état d'une manière immuable

Question

Mon API renvoie une liste de nœuds de la forme:

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

et j'afficher une structure arborescente en utilisant ces informations.

Actuellement, mon implémentation enregistre la liste donnée en tant qu'état et mon réducteur crée d'abord un clone de l'état existant, puis ajoute/met à jour/supprime des nœuds de manière immuable. Mes composants de réaction s'attendent cependant à ce qu'une liste d'enfants leur soit transmise comme accessoire (ne faisant pas partie de la réponse de l'API). Ainsi, dans mon composant le plus élevé, je prends l'état et le convertis en la forme requise. vers le bas pour abaisser les composants à la place. L'arbre converti a la forme:

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

-à-dire une version de hachage carte de l'arbre avec chaque enfant stocké dans une liste sur leurs parents, et la racine de l'arbre étant le plus objet externe, qui est ensuite passé vers le bas.

Désormais, à chaque changement d'état, l'état stocké est converti en cette forme, mais avec une grande quantité de nœuds, cette restructuration provoque un retard à chaque changement d'état, donc je prévois de stocker directement l'état c'est-à-dire state = root) et seulement restructurer la réponse API une fois.

Je ne suis pas sûr de savoir comment faire des changements d'état pour cela de manière immuable. Disons que je veux ajouter un nouvel enfant à un nœud spécifique qui se trouve au fond de la hiérarchie des nœuds, cela est facile: je pousse simplement l'enfant dans la liste des enfants du nœud parent mais comment le faire de façon immuable?

ou quelle est une autre façon de procéder?

Answer 1

Je suggère d'utiliser immutablejs et treeutils