React Redux, имеющий дело с большими обновлениями вложенного дерева

Question

Прежде всего, я абсолютно новичок в redux. В нашем проекте у нас есть очень большая редактируемая древовидная таблица , которая создается из большого глубоко вложенного дерева . Таблица содержит примерно (x, y) 15x250 = 3700 ячеек (большинство из них не видны, пока пользователь не развернет всю древовидную таблицу). Мне было интересно, какой способ лучше всего подходит для реализации в React redux.

Дополнительная информация: если вы редактируете значение в [0, n] (худший случай), все значения изменяются и должны быть повторно отрисованы . В среднем, n значений изменяется при каждом вводе пользователя.

Я борюсь с тремя вопросами:

1. Структура состояний - стоит ли нормализовать (и / или делать плоское) дерево?
2. Обновления статуса - следует ли обновлять все дерево сразу или более разумно обновлять каждое отдельное значение (возможно, с помощью пакета redux)?
3. Имеет ли это смысл вообще или мы должны делать все вычисления на стороне сервера и просто отображать всю таблицу с новым деревом?

Answer 1

Я сопровождаю Redux.

Мы особенно рекомендуем нормализовать сложное / вложенное состояние, если это необходимо . Это в сочетании с такими методами, как передача идентификаторов элементов дочерним элементам в качестве реквизита и их чтение их собственных индивидуальных значений из хранилища , поможет вам улучшить производительность рендеринга в приложении.

Второй вопрос имеет несколько возможных ответов, и мне нужно увидеть несколько конкретных примеров того, какие типы обновлений logi c вы пытаетесь запустить. В общем, мы рекомендуем моделировать действия как «события», а не как «установщики» , и минимизировать количество отправляемых вами действий.

Я специально рекомендую использовать наш официальный Пакет Redux Toolkit . Это наш рекомендуемый подход для написания Redux logi c, который включает a createEntityAdapter API , который может помочь с управлением нормализованными данными в магазине.

Мы только что опубликовали совершенно новый Учебник по основной документации «Redux Essentials» , который учит, «как правильно использовать Redux», с использованием наших последних рекомендованных API и практик, таких как Redux Toolkit и API перехватов React-Redux.

Наконец , вы можете прочитать слайд-шоу High Performance Redux , которое было написано несколько лет как go, но основные принципы c там по-прежнему применяются.

Answer 2

Другой способ нормализовать дерево состояний - normalized-reducer , который позволяет вам передать схему ваших отношений и возвращает действия и селекторы для внесения изменений в соответствии с ваша модель.