React / Redux - как визуализировать / обновить глубоко вложенное состояние

Question

Я получу от API глубоко вложенное состояние - например:

[{
    "id": 1,
    "text": "test",
    "children": [{
        "id": 1,
        "text": "test",
        "children": [{
            "id": 1,
            "text": "test",
            "children": [{
                "id": 1,
                "text": "test",
                "children": []
            }]
        }]
    }]
}]

(Пожалуйста, игнорируйте дублирующиеся идентификаторы и т. Д.)

Теперь вот требования:

• Мне нужно правильно отобразить это

например,

<div>
text
  <div>
   text
  </div>
</div>

• Мне нужно иметь возможность обновлять вложенное состояние в хранилище избыточных данных

• Этот список может быть огромным - например, по крайней мере, 3 КБ (что теоретически работает нормально)

Что я пробовал:

Имеявсе необъявленное:

• Рендеринг очень сложен (с parentId)
• Поддерживать структуру сложно (нужно ее сгладить и разровнять) -> это стоит большой производительности

Наличие всего вложенного:

• Обновление магазина невозможно без "обмана" в реакции -> непосредственное управление состоянием

Что может быть решениемк этому?Какой должна быть архитектура

Answer 1

Здесь вам может пригодиться что-то вроде immutability-helper .

const state = [{
    "id": 1,
    "text": "test",
    "children": [{
        "id": 1,
        "text": "test",
        "children": [{
            "id": 1,
            "text": "test",
            "children": [{
                "id": 1,
                "text": "test",
                "children": []
            }]
        }]
    }]
}];

const newState = update(state, { 
    0: { 
      children: { 
        0: {
          children {
            0 : {
              children: {
                0: { 
                  "id": { $set: 2}
                }
              }
            }
          }
        }
      }
   };

return newState;

[{
    "id": 1,
    "text": "test",
    "children": [{
        "id": 1,
        "text": "test",
        "children": [{
            "id": 1,
            "text": "test",
            "children": [{
                "id": 2,
                "text": "test",
                "children": []
            }]
        }]
    }]
}];

Здесь 0 можно заменить некоторыми индексами в вашем payload;Я просто использовал здесь 0, так как все массивы примеров содержат только 1 элемент.Это довольно глубоко вложено, хотя, как отмечают комментарии, любое уплощение, которое вы можете сделать, облегчит обновления.