ReactJS - Создание промежуточного программного обеспечения Redux

Redux - отличное дополнение к ReactJs для управления состоянием реагирующего приложения и обработки потока данных. Это похоже на то, как промежуточное программное обеспечение работает в Express, вы, возможно, знакомы с термином промежуточное программное обеспечение, и если нет, я буду обсуждать его далее. Наиболее распространенный вариант использования промежуточного программного обеспечения в Redux - обработка вызовов асинхронного API.

Примечание. Эта статья посвящена промежуточному программному обеспечению в Redux и, следовательно, требует базовых знаний о redux и его архитектуре, я предлагаю прочитать это здесь.

Промежуточное ПО

Промежуточное ПО как концепция - это то, что находится между запросом и ответом.

Запрос может быть любым: взаимодействие пользователя (щелчок, фокус, наведение, прокрутка) с программным обеспечением, вызов функции и т. Д. В контексте Redux каждое действие, отправленное в хранилище, запускает промежуточное ПО.

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

Redux Middleware

Промежуточное ПО в Redux - это сторонние инструменты, которые являются чем-то средним между отправкой действия и временем, которое требуется для достижения редуктора.

Redux Saga и Redux Thunk - лучшие примеры промежуточного программного обеспечения Redux. Оба они используются для обработки вызовов асинхронного API.

Создание промежуточного программного обеспечения

Теперь мы узнаем, как создать промежуточное ПО для redux, которое будет регистрировать каждый запрос в консоли (позже мы изменим его с помощью вызова API для записи журналов в файл на сервере).

Промежуточное ПО - это простая функция JavaScript.

// Custom Middleware Function
const customMiddleware = ({ dispatch, getState }) => next => action => {
  console.log('I am watching your actions', action);
  next(action);
};

Давайте разберем приведенный выше код. В строке 1 у нас есть функция javascript customMiddleware Эта функция принимает объект в качестве параметра, который имеет методы dispatch и getState (деструктурированный) хранилища redux, и возвращает функцию, которая получает следующую в качестве параметра. Этот next необходимо вызвать в конце, чтобы продолжить, иначе будет выдана ошибка.

Далее он возвращает функцию, которая фактически содержит логику промежуточного программного обеспечения и получает текущий action в качестве параметра. Это промежуточное ПО будет печатать действие в консоли браузера при каждой отправке действия в магазин.

Давайте расширим это, чтобы отправить событие в магазин.

// Custom Middleware Function
const customMiddleware = ({ dispatch, getState }) => next => action => {
  if (action.type !== 'HELLO_FROM_MIDDLEWARE') {
    console.log('I am watching your actions', action);
    dispatch({ type: 'HELLO_FROM_MIDDLEWARE' });
  }
  next(action);
};

В приведенном выше коде он теперь отправляет другое действие редуктору, также добавлено условие if, которое гарантирует, что это промежуточное ПО не будет поймано в бесконечном цикле, потому что оно также будет прослушивать это отправленное действие.

Интеграция с Redux

Чтобы интегрировать это промежуточное ПО в приложение response-redux, необходимо передать эту функцию в утилиту applyMiddleware redux.

export default createStore(
  combineReducers({ CommonReducer }),
  applyMiddleware(sagaMiddleware, custom)
);

Вот полный исходный код.