Blog / Programming / Уроки React. Урок 11. Pt.2.

Уроки React. Урок 11. Pt.2.

By Pavel Bragin 4,612 October 31, 2016

Category:

Самый простой пример side-effects это Logging. Далее мы с Вами создадим middleware который занимается Logging.
Создадим папку middlewares , а в ней файл logger.js:

export default store => next => action => {
    console.log('---', 'before: ', store.getState())
    console.log('---', 'dispatching', action)
    next(action)
    console.log('---', 'after', store.getState())

export default store => next => action => {

console.log('---', 'before: ', store.getState())

console.log('---', 'dispatching', action)

next(action)

console.log('---', 'after', store.getState())

middlewareэто функция которая принимает store, возвращает функцию которая принимает next, (функцию, чтобы передать управление дальше), которая в свою очередь возвращает функцию, которая принимает action, которая уже что-то делает. Такая запись дает возможность иметь доступ к текущему значению Вашегоstore , к next и action . Наш store будет показывать immutable.js структуры.(это происходит при помощи нашего recordsFromArray из reducer/utils.js) И что важно state нашего store может меняться на протяжении жизни этой middleware. Это мы увидим прямо здесь в нашем logger. Сначала мы сделаем dispatch того что у нас было видно состояние “до”, а далее вызовем next – это передача управления дальше. Обычно существуют целая цепочка middlewares, и они проходят одна за другой, т.е. мы обработали наш action в этой middleware и затем, мы передаем управление c помощью next в следующую, и когда middlewares заканчиваются она попадает в reducers, там обрабатывается и попадает в store. После того как мы закончим с dispatch этого action мы вернемся снова в наш middlewareи сможем получить актуальное состояние store после того как он обработался в reducers.

Теперь наш middleware нужно подключить в store. Заходим в store/index.jsи меняем его следующим образом:

import { createStore, applyMiddleware, compose } from 'redux'
import reducer from '../reducer'
import logger from '../middlewares/logger'

const enhancer = compose(
    applyMiddleware(logger),
    window.devToolsExtension ? window.devToolsExtension() : f => f
)

const store = createStore(reducer, {}, enhancer)
window.store = store

export default store

import { createStore, applyMiddleware, compose } from 'redux'

import reducer from '../reducer'

import logger from '../middlewares/logger'

const enhancer = compose(

applyMiddleware(logger),

window.devToolsExtension ? window.devToolsExtension() : f => f

)

const store = createStore(reducer, {}, enhancer)

window.store = store

export default store

Для этого в store есть третий аргумент enhancer. Сперва подключаем наш middleware а также из redux нам понадобиться функция applyMiddleware которая может собрать все middlewares которые нам нужны. Пока подключаем только logger.

Теперь на каждый action у нас будет происходить Logging. Посмотрите на результаты работы нашего logger в console в браузере, к примеру, удалив одну из статей.

Конечно же middlewares создаются и сторонними разработчиками, вы можете их подключать – этим займемся чуть позже. Помимо middlewares существуют enhancersкоторые можно подключать без применения middleware. Хороший пример это redux devtools. Он позволяет посмотреть какие actions у Вас происходят, отменять action, восстановить его, увидеть какой state сейчас у вашего store. Рекомендуется поставить себе его в виде Chrome extension. В документации вы найдете информацию о том как подключить его к Вашему store. Если вы хотите подключить несколько middlewares вам нужно будет использовать функцию compose, которая также есть в redux . Пример подключения уже был нами написан в store/index.js. После перезагрузки приложения заработает наш redux devtools.

Так как middlewares вызываются все для каждого action, а нам зачастую это не нужно, то необходимо использовать здравый смысл и не создавать их сотнями, а также делать проверки на предмет надобности той или иной middleware. Еще важно помнить о порядке, они передаются по цепочке от первого к последнему и поэтому logger нужно ставить в конце, а скажем технические middlewares, например генерацию случайного id вам стоит ставить в начале.

Как упорядочить middlewares? В том порядке в котором вы их оглашаете, так они и сработают. Для примера добавим еще одну middleware которая просто будет передавать управление дальше, также вместе с action она передает ‘hello world’ или может передать случайный id (это может пригодиться для выполнения домашнего задания). После всех impot в store/index.js сразу добавим:

import { createStore, applyMiddleware, compose } from 'redux'
import reducer from '../reducer'
import logger from '../middlewares/logger'

const dumbMiddleware = store => next => action => next({...action, addition: 'hello world'})

const enhancer = compose(
    applyMiddleware(dumbMiddleware, logger),
    window.devToolsExtension ? window.devToolsExtension() : f => f
)

const store = createStore(reducer, {}, enhancer)
window.store = store

export default store

import { createStore, applyMiddleware, compose } from 'redux'

import reducer from '../reducer'

import logger from '../middlewares/logger'

const dumbMiddleware = store => next => action => next({...action, addition: 'hello world'})

const enhancer = compose(

applyMiddleware(dumbMiddleware, logger),

window.devToolsExtension ? window.devToolsExtension() : f => f

)

const store = createStore(reducer, {}, enhancer)

window.store = store

export default store

Также в applyMiddleware она будет стоять первой, далее logger и redux devtools.

Домашнее задание: создать функционал добавления комментария к статье. Т.е. там где под каждой статьей есть комментарии, там должна появиться форма с кнопкой, которая добавляет комментарий к этой статье. Сохранять ее нигде не надо кроме Вашего store.

Код урока доступен у нас в репозитории.