Мидлвары (middlewares) относятся к продвинутым техникам использования Redux. В данном уроке мы посмотрим на них не с точки зрения написания, а исключительно с точки зрения использования. Нам они потребуются для подключения различных библиотек буквально с первого момента использования совместно с React.
Мидлвары — функции, которые последовательно вызываются в процессе обновления контейнера.
Общий принцип работы таков:
Такая организация библиотеки позволяет её крайне легко расширять новой функциональностью без необходимости переписывать исходный код Redux под конкретную задачу.
Типичные примеры использования включают:
Посмотрим как их подключить:
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
.
В будущих уроках вам не придётся подключать его руками. Мы уже сделали это за вас. Всё что нужно — установить расширение и не забывать туда смотреть. Это ваш главный помощник в отладке на протяжении всего курса.