Улучшение редукторов Redux 3 способами

С объектами, классами и функциональным программированием

В этой статье я предполагаю, что вы знаете, что такое Redux и что делают редукторы.

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

Ниже приведен простой switch оператор, который вы, вероятно, видели в 99% примеров Redux / reducer.

Мы собираемся улучшить его, используя dictionary.

Словарь (пара "ключ-значение")

dictionary - это простой объект JavaScript, в который вы можете добавить строковое значение в качестве ключа и присвоить ему значение.

Ниже представлена ​​упрощенная версия того, что мы собираемся создать. Обратите внимание, что ключ - это имя действия type, а назначенное значение - это функция, которая принимает текущее состояние и полезную нагрузку в качестве аргументов для создания нового состояния.

Функциональный подход JavaScript

Давайте улучшим пример словаря, создав функцию baseReducer, которая принимает initialState в качестве первого аргумента и словарь в качестве второго аргумента.

Надеюсь, приведенный ниже код легко читать / понимать, но в основном мы используем константу типа действия в качестве имени функции.

В приведенном выше коде параметр reducerDictionary - это словарь, который был передан. Обратите внимание, как здесь используется action.type, reducer[action.type], чтобы получить доступ к правильной функции редуктора.

Подход класса JavaScript

Давайте улучшим пример словаря, создав класс BaseReducer для расширения наших редукторов классов.

Обратите внимание на то, как ShowsReducer extends BaseReducer. Это наследование, которое абстрагирует часть логики до другого класса, поэтому редукторы имеют только необходимое.

Если вы посмотрите на BaseReducer выше, вы увидите:

• Line 2: initialState, который будет переопределен, когда класс редуктора расширяет это BaseReducer.
• Line 4: Метод редуктора, который будет использоваться Redux.
• Line 5: получает доступ к методу класса, соответствующему action.type.
• Line 7: если метод не найден (!method) или действие является ошибкой (action.error), возвращается текущий state.
• Line 11: вызывает найденный метод с аргументами state и action, которые возвращают измененный state, который будет использовать Redux.

Примеры кода

Если вы хотите увидеть эти примеры кода в действии, ознакомьтесь с другой моей статьей, посвященной образцу приложения и исходному коду как для функционального, так и для базового подхода. У меня тоже есть версии TypeScript!