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

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

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

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

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

Такая организация библиотеки позволяет её крайне легко расширять новой функциональностью без необходимости переписывать исходный код 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. Установите его в свой браузер.

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

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

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

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

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

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

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.