Во-первых, краткий обзор того, что такое редукторы в Redux:
Редукторы - это не что иное, как чистые функции, которые принимают предыдущее состояние и действие и возвращают новое состояние.
Следует помнить о двух вещах: они чистые и, следовательно, не изменяют состояние.
Разобравшись с этим, давайте перейдем к делу.
Когда мы начинаем с redux, мы пишем редуктор следующим образом:
У нас есть редуктор поиска, который обновляет состояние на основе различных действий, таких как настройка результатов поиска, обновление строки поиска или изменение состояния загрузчика / счетчика. Предположим, это редуктор срезов, который мы можем объединить позже с помощью функции combineReducers(reducers).
Теперь, если вы похожи на меня, вам могут не понравиться операторы переключения 😋
У них слишком много собственных шаблонов. Редуктор, обрабатывающий многие типы действий с использованием вариантов переключения, будет долгим. А сейчас это было бы нехорошо, не так ли ?! Идея состоит в том, чтобы отказаться от переключателя и перейти к более функциональному подходу.
Давайте немного обдумаем это
Что мы можем сделать, так это абстрагировать всю нашу логику переключения case в «функции case» и создать объект, который сопоставляет типы действий с соответствующими функциями case. Назовем этот объект «actionHandlers».
Ниже представлен объект:
Как видите, теперь у нас есть отображение типов действий на функции case.
Функции case похожи на небольшие функции-редукторы, которые принимают состояние и входящее действие в качестве аргументов и возвращают новый фрагмент дерева состояний.
Теперь мы должны создать функцию «reducer creator», чтобы использовать наш actionHandlers. Эта функция вернет другую функцию, которая на самом деле будет нашим редуктором, переданным в combineReducers(). Вот:
Как видите, createReducer() - это замыкание, возвращающее другую функцию. Эта возвращенная функция соответствует форме (previousState, action) => newState и, следовательно, будет нашим фактическим редуктором фрагментов.
Возвращенная функция-редуктор может получить доступ как к actionHandlers, так и initialState аргументам включающей функции из-за закрытия. initialState используется как аргумент по умолчанию для state. Внутри функции reducer мы проверяем, есть ли у нашего actionHandlers свойство, соответствующее типу входящего действия. Если это так, мы выполняем эту функцию case внутри actionHandlers, передавая состояние и действие. Если тип действия не является свойством внутри actionHandlers, мы возвращаем предыдущее состояние.
Вы также можете найти createReducer() в официальных документах Redux.
Эта функция создания редуктора теперь может быть импортирована в разные файлы редуктора для создания всех наших редукторов фрагментов!
Вышеупомянутая функция сейчас является многословной для объяснения точки зрения. Давайте немного оживим! Ниже представлен новый и улучшенный файл редуктора создания. 😎
Я сократил все, используя лямбды и функцию propOr библиотеки Ramda. Функция propOr берет второй аргумент (ключ) для проверки внутри третьего аргумента (объекта) и возвращает его значение, если оно найдено. В противном случае он возвращает значение по умолчанию, полученное из 1-го аргумента. Первый аргумент, identity, - это функция, которая просто возвращает переданный ей параметр.
Таким образом, функция возвращается, если она находится в actionHandlers, которая выполняется с использованием (state, action. Если действие не найдено, propOr возвращает идентификатор, который выполняется с теми же аргументами (state, action) и возвращает первый предоставленный аргумент, которым является state (предыдущее состояние в данном случае).
Вы можете создавать свои собственные функции «propOr» и «identity», Ramda - это именно то, что я использую.
Позвольте мне показать вам новый файл сокращения поиска, чтобы получить общее представление о том, как мы используем нашу createReducer функцию с actionHandlers.
Функция createReducer применяется частично и возвращает наш последний редуктор среза и экспортируется в файл, где мы используем функцию combineReducers.
Что ж, вот и хороший способ создания редукторов и сокращения общего шаблона. Надеюсь, это принесет вам какую-то пользу :)
Вот несколько ссылок на мои предыдущие статьи:
Мир ✌️
