Мидлвары / JS: Redux (React)

Мидлвары (middlewares) относятся к продвинутым техникам использования Redux. В данном уроке мы посмотрим на них не с точки зрения написания, а исключительно с точки зрения использования. Нам они потребуются для подключения различных библиотек буквально с первого момента использования совместно с React.

Мидлвары — функции, которые последовательно вызываются в процессе обновления контейнера.

Общий принцип работы таков:

Мидлвары встраиваются в хранилище при его создании.
Во время диспатчинга (отправки действий) данные проходят через них и только затем попадают в редьюсер.

Работа мидлваров в
Redux

Такая организация библиотеки позволяет её крайне легко расширять новой функциональностью без необходимости переписывать исходный код Redux под конкретную задачу.

Типичные примеры использования включают:

Логирование.
Оповещение об ошибках.
Работа с асинхронным API.
Маршрутизация.

Посмотрим как их подключить:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const store = createStore(
  reducer,
  /* preloadedState, */
  applyMiddleware(thunk)
)

thunk — это мидлвар, но перед тем как передать его в функцию createStore, нужно применить к нему функцию applyMiddleware. Также обратите внимание на то, что мидлвар мы передаём вторым параметром, хотя в предыдущем уроке вторым параметром шёл initState. Объясняется это просто — функция createStore проверяет тип второго параметра и в зависимости от этого понимает, что перед ней. В общем случае она принимает три параметра: редьюсер, начальное состояние и мидлвары.

В случае если мидлвар несколько, придётся воспользоваться ещё одной функцией:

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';

const store = createStore(
  reducer,
  /* preloadedState, */
  compose(
    applyMiddleware(thunk),
    applyMiddleware(logger)
  ),
)

В такой ситуации в контейнер передаётся результат функции compose. Последняя в свою очередь принимает на вход мидлвары.

Теперь мы подобрались к главному. Для Redux написано специальное браузерное расширение Redux DevTools. Установите его в свой браузер.

Расширение для
Redux

Ниже код подключения этого расширения к хранилищу:

const reduxDevtools = window.__REDUX_DEVTOOLS_EXTENSION__;
const store = createStore(
   reducer,
   /* preloadedState, */
    reduxDevtools && reduxDevtools(),
 );

Обратите внимание на то, что он не требует использования функции applyMiddleware.

В будущих уроках вам не придётся подключать его руками. Мы уже сделали это за вас. Всё что нужно — установить расширение и не забывать туда смотреть. Это ваш главный помощник в отладке на протяжении всего курса.

Дополнительные материалы

Официальная документация ReduxDevTools