Мидлвары (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
.
В будущих уроках вам не придётся подключать его руками. Мы уже сделали это за вас. Всё что нужно — установить расширение и не забывать туда смотреть. Это ваш главный помощник в отладке на протяжении всего курса.
Вам ответят команда поддержки Хекслета или другие студенты.
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Загляните в раздел «Обсуждение»:
Статья «Ловушки обучения»
Вебинар «Как самостоятельно учиться»
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Зарегистрируйтесь или войдите в свой аккаунт