Как создать / отредактировать / удалить из вложенной структуры в Redux?

Question

Я рендерим вложенные данные в таблицу строка за строкой.Вот простой пример структуры:

[
  {
    id: 1,
    children: [
      {
        id: 2,
        children: []
      },
      {
        id: 3,
        children: [
          {
            id: 4,
            children: []
          },
          {
            id: 5,
            children: []
          }
        ]
      }
    ]
  },
  {
    id: 6,
    children: []
  },
  {
    id: 7,
    children: [
      {
        id: 8,
        children: [
          {
            id: 9,
            children: []
          }
        ]
      }
    ]
  }
]

Если я хочу создать нового потомка в id: 2, чтобы он перешел от

{
  id: 2,
  children: []
}

к

{
  id: 2,
  children: [
    {
      id: 10,
      children: []
    }
  ]
}

Как правильно обновить состояние в этом случае?Должен ли я просто клонировать весь этот массив и найти идентификатор, у которого будет новый дочерний элемент, добавить его в дочерние элементы [] и вернуть этот новый клонированный массив?Что делать, если это огромный массив?

Answer 1

С Redux вы должны постоянно обновлять состояние.В основном у вас есть два варианта:

1. Использовать Object.assign или ES6 оператор расширения для генерации нового объекта из объекта текущего состояния: см. Неизменяемое обновлениешаблоны (Redux docs)

2. Используйте одну из нескольких библиотек, которые делают это для вас, я бы посоветовал Immer , но есть и другие варианты, такие как immutablejs например.

Мне очень нравится Immer, потому что он позволяет мне писать чистые и легко читаемые / содержать редукторы.Даже вы можете использовать методы мутации с ним.

Answer 2

Вы можете использовать итеративный и рекурсивный подход с именованной функцией в качестве обратного вызова для Array#forEach

здесь Как обновить значение вложенного массива объектов