«Почему мне нужно прикасаться к трем файлам, чтобы простая функция заработала?» Действительно, почему!

Как использовать Redux в наши дни?

Перед моей собственной реализацией управления состоянием я должен показать, насколько обычное использование избыточности является худшим в лучшую сторону.

Это худшее, что я думаю…

В этой структуре вы должны;

  1. Напишите «уникальные» типы действий для всех действий, если вы этого не делаете; одна отправка действия вызовет более одного случая в нескольких редьюсерах.
  2. Откройте 2 новых файла: «XModuleActions» и «XModuleReducer».
  3. Обновите файл ActionTypes с новыми типами действий.
  4. Обновите магазин с новым редюсером, который полностью СТАТИЧЕСКИЙ!

Это лучше, чем предыдущее с модульным шаблоном, но у него есть недостатки…

При использовании этого типа вы должны;

  1. Обновите каждый файл редукса для добавления нового действия.
  2. Создайте новую папку redux с 3 файлами для каждого нового модуля. Это приводит к плохому опыту разработки в больших проектах, которые состоят из сотен модулей с неограниченными уровнями данных, и это неуправляемо.
  3. убедиться, что типы действий снова уникальны?
  4. редукторы STATIC снова

В PowerDev у нас есть приложения, управляемые данными, с бесчисленными модулями, картами и безграничными диаграммами для визуализации данных.

Давайте помечтаем создать по 3 файла для каждого из них и обновить магазин во время разработки! Какая огромная трата времени, сотни повторяющихся кодов и плохая реализация простого управления состоянием?

Есть еще одна большая проблема…

Например, в нашем приложении есть настраиваемая панель мониторинга, которая создается по запросу пользователя с настраиваемыми диаграммами.

Должен ли я держать все эти редукторы на корневом уровне?

В приборной панели могут быть модули, к которым у пользователя нет доступа.

Согласно этим;

  1. Динамические строительные леса редуктора или создание по требованию зависят от ваших потребностей.
  2. Все редукторы не должны добавляться в Store статически.
  3. Любой модуль должен иметь возможность внедрить свой уровень данных и удалить себя из хранилища, когда это необходимо.
  4. Компоненты React должны иметь возможность лениво загружать свой избыточный слой.

Выполнение

Функции Store, injectReducer и removeReducer.

Для лучшего понимания отметьте Closures и IIFE.

Генератор динамических срезов (редукторов) с RTK

Lazy Reducer Provider для загрузки редьюсера (для клиентских модулей)

Наконец, генерация всего редукса в одном файле

Структура файла

Модуль/redux.ts

Создание действий и редьюсера в одном файле простым вызовом CreateDynamicSlice

Внедрение и использование редьюсера и действий

Заключение

Мне не нужно:

  1. Напишите глупые действия или типы действий для простого обновления состояния
  2. Обновите и создайте так много файлов для управления состоянием
  3. Загрузите каждый редьюсер в проекте с инициализацией приложения
  4. Используйте диспетчеризацию с useDispatch для простого изменения состояния

Теперь я могу:

  1. Динамически обновлять любую часть состояния одним действием
  2. Ленивый редуктор нагрузки с модулем (при необходимости)
  3. Все в одном слое данных файла
  4. Легко использовать!

Подпишитесь на меня Github и LinkedIn.