Redux - это де-факто система управления состоянием для библиотек React, и единственное, что сбивает людей с толку, - это настройка редуктора, особенно для асинхронных действий. Позвольте мне показать вам пример редуктора преобразователя и объяснить различные оптимизации, которые мы можем выполнить с ним, чтобы сделать наш код чистым.
В этом коде, похоже, нет никаких проблем, но по мере роста вашего проекта вы начинаете замечать в своем коде множество дубликатов, которых, по вашему мнению, можно избежать. Давайте перечислим несколько наблюдений, которые мы можем сделать из приведенного выше кода.
- Для большинства асинхронных действий состояние будет иметь следующую информацию: a) данные: которые будут использоваться компонентами
b) загрузка: флаг, указывающий, выполнен ли вызов api или нет.
c) Необязательно: объект ошибки, содержащий ответ на ошибку, флаги неудачи и успеха.
Таким образом, большинство редукторов будут иметь повторяющийся код для обновления состояния, который может быть оптимизирован в соответствии с принципом кода DRY (Don't Repeat Yourself ). - Для вызова API мы должны вручную отправлять действия с полезной нагрузкой для каждого асинхронного состояния.
Из этих двух наблюдений очевидно, что это необходимо.
- Упростите настройку редуктора и создайте единственную функцию, которая будет генерировать редуктор на основе передаваемого ему actionType.
- Автоматизируйте отправку действий на основе асинхронного состояния (Подсказка: промежуточное ПО Redux Promise).
Упрощение настройки редуктора.
Нам нужно создать функцию, которая генерирует reducer на основе переданного ей actionType.
Функция createReducer выполнит изменение состояния, связанное с определенным действием.
Функция createThunkReducer - это то, что генерирует редуктор для асинхронного действия, и на первый взгляд это может показаться некоторым загадочным, но я не уверяю вас. Подумайте об этом как об объекте, содержащем функции с динамическими именами. Вы можете проверить эту ссылку для лучшего понимания.
Итак, давайте посмотрим, как это выглядит при использовании в корневом редукторе.
Эта единственная функция избавила нас от необходимости создавать дополнительные файлы или код для каждого действия.
Примечание. Если вы когда-нибудь столкнетесь со сценарием добавления ваших собственных конкретных редукторов, мы можем передать обработчики действий в качестве дополнительных параметров в createThunkReducer.
Упростите отправку действий с помощью ПО промежуточного слоя Redux Promise.
Промежуточное ПО Redux для обещаний проверяет, является ли отправляемая полезная нагрузка действия обещанием, и, если да, преобразует действие и добавляет _PENDING, _FULFILLED или _REJECTED к имени действия на основе состояния обещания до того, как оно достигнет редуктора, и это именно то, что нам нужно, так как оно освобождает нас от необходимости писать диспетчерские функции для каждого асинхронного состояния.
Это конфигурация хранилища для добавления промежуточного программного обеспечения redux Promise и redux thunk.
Таким образом, промежуточное ПО redux Promise проверяет отправляемую ему полезную нагрузку, выполняет преобразования действия и отправляет его редуктору, где он выполняет обновление хранилища.
Ссылки:
https://www.digitalocean.com/community/tutorials/redux-redux-thunk
