Redux

Redux — это предсказуемый контейнер состояния для JavaScript-приложений.
(Если вы ищете WordPress-фреймворк, ознакомьтесь с Redux Framework.)

Он помогает создавать приложения, которые ведут себя последовательно, работают в различных средах (клиент, сервер и нативное приложение), и легко поддаются тестированию. Кроме того, он предоставляет отличный опыт разработки, такой как редактирование кода в реальном времени с отладчиком, позволяющим перемещаться во времени.

Вы можете использовать Redux вместе с React, или с любой другой библиотекой представления.
Он очень компактен (2 КБ, включая зависимости).

Узнайте о Redux от его создателя:
Часть 1: Начало работы с Redux (30 бесплатных видео)
Часть 2: Разработка приложений React с idiomatic Redux (27 бесплатных видео)

Отзывы

“Люблю то, что вы делаете с Redux”
Jing Chen, создатель Flux

“Я попросил комментарии по Redux в внутренней группе обсуждения JS в FB, и это было единодушно оценено как очень круто. Действительно замечательная работа.”
Bill Fisher, автор документации Flux

“Круто, что вы изобретаете улучшенный Flux, не используя Flux вообще.”
André Staltz, создатель Cycle

Перед продолжением

Также прочтите:
Возможно, вам не нужен Redux

Опыт разработки

Я написал Redux, работая над своим докладом React Europe под названием “Горячая перезагрузка с путешествиями во времени”. Моей целью было создание библиотеки управления состоянием с минимальным API, но полностью предсказуемым поведением, так чтобы было возможным реализовать ведение журнала, горячую перезагрузку, путешествия во времени, универсальные приложения, запись и воспроизведение без каких-либо дополнительных требований к разработчику.

Влияния

Redux развивает идеи Flux, но избегает его сложности, черпая вдохновение из Elm.
Независимо от того, использовали ли вы их или нет, Redux займет у вас всего несколько минут для начала работы.

Установка

Чтобы установить стабильную версию:

npm install --save redux

Предполагается, что вы используете npm в качестве менеджера пакетов.

Если нет, вы можете получить эти файлы на unpkg, скачать их или направить своего менеджера пакетов к ним.

Чаще всего Redux используется как набор CommonJS модулей. Эти модули — то, что вы получаете при импорте redux в Webpack, Browserify или среде Node.js. Если вы предпочитаете работать на грани возможностей и использовать Rollup, мы поддерживаем и этот вариант.

Если вы не используете сборщик модулей, это также нормально. Пакет npm redux включает предварительно скомпилированные производственные и отладочные UMD сборки в папке dist. Их можно использовать напрямую без сборщика модулей, и они, таким образом, совместимы со многими популярными загрузчиками и средами JavaScript-модулей. Например, вы можете добавить UMD-сборку в качестве <script> тега на странице или попросить Bower установить его. UMD-сборки делают Redux доступным в виде window.Redux глобальной переменной.

Исходный код Redux написан на ES2015, но мы предварительно компилируем как CommonJS, так и UMD-сборки в ES5, чтобы они работали в любом современном браузере. Вам не нужно использовать Babel или сборщик модулей, чтобы начать работу с Redux.

Дополнительные пакеты

Скорее всего, вам также понадобятся связующие элементы React и инструменты разработчика.

npm install --save react-redux
npm install --save-dev redux-devtools

Обратите внимание, что в отличие от самого Redux, многие пакеты в экосистеме Redux не предоставляют UMD-сборки, поэтому мы рекомендуем использовать сборщики модулей CommonJS, такие как Webpack и Browserify, для максимально комфортного опыта разработки.

Суть

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

Вот и всё!

import { createStore } from 'redux'

/**
 * This is a reducer, a pure function with (state, action) => state signature.
 * It describes how an action transforms the state into the next state.
 *
 * The shape of the state is up to you: it can be a primitive, an array, an object,
 * or even an Immutable.js data structure. The only important part is that you should
 * not mutate the state object, but return a new object if the state changes.
 *
 * In this example, we use a `switch` statement and strings, but you can use a helper that
 * follows a different convention (such as function maps) if it makes sense for your
 * project.
 */
function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1
  case 'DECREMENT':
    return state - 1
  default:
    return state
  }
}

// Create a Redux store holding the state of your app.
// Its API is { subscribe, dispatch, getState }.
let store = createStore(counter)

// You can use subscribe() to update the UI in response to state changes.
// Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly.
// However it can also be handy to persist the current state in the localStorage.

store.subscribe(() =>
  console.log(store.getState())
)

// The only way to mutate the internal state is to dispatch an action.
// The actions can be serialized, logged or stored and later replayed.
store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1

Вместо непосредственного изменения состояния, вы указываете желаемые изменения с помощью обычных объектов, называемых действиями. Затем вы пишете специальную функцию, называемую редуктором, чтобы определить, как каждое действие преобразует состояние всего приложения.

Если вы приходите из Flux, существует одно важное различие, которое нужно понять. Redux не имеет диспетчера или поддержки нескольких хранилищ. Вместо этого есть только одно хранилище с одной корневой функцией редуктора. По мере роста приложения, вместо добавления хранилищ, вы разбиваете корневой редуктор на более мелкие редукторы, которые независимо работают с различными частями дерева состояния. Это точно так же, как в приложении React существует только один корневой компонент, но он состоит из многих маленьких компонентов.

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

Изучите Redux от его создателя

Начало работы с Redux — это видеокурс, состоящий из 30 видео, озвученных Даном Абрамовым, автором Redux. Он разработан для дополнения части «Основы» документации, принося дополнительные идеи по неизменяемости, тестированию, лучшим практикам Redux и использованию Redux с React. Этот курс бесплатный и всегда будет бесплатным.

“Отличный курс на egghead.io от @dan_abramov — вместо того, чтобы просто показать, как использовать #redux, он также показывает, как и почему Redux был создан!”
Sandrino Di Mattia

“Прохожу курс @dan_abramov по @eggheadio “Начало работы с Redux” — удивительно, насколько простыми становятся концепции с помощью видео.”
Chris Dhanaraj

“Этот видеокурс по Redux от @dan_abramov на @eggheadio потрясающий!”
Eddie Zaneski

“Пришел ради шумихи вокруг имени. Остался ради надёжных основ. (Спасибо, и отличная работа @dan_abramov и @eggheadio!)”
Dan

“Этот видеокурс по Redux от @dan_abramov постоянно меня поражает — собираюсь серьёзно переработать кое-что”
Laurence Roberts

Так чего же вы ждёте?

Посмотрите 30 бесплатных видео!

Если вам понравился мой курс, подумайте о поддержке Egghead, приобретя подписку. Подписчики имеют доступ к исходному коду примера в каждом видео, а также к множеству продвинутых уроков по другим темам, включая углублённое изучение JavaScript, React, Angular и многое другое. Многие инструкторы Egghead также являются авторами открытых исходных кодов, поэтому приобретение подписки — это хороший способ поблагодарить их за проделанную работу.

Документация

Для экспорта в PDF, ePub и MOBI для автономного чтения, и инструкции по их созданию, пожалуйста, обратитесь к: paulkogel/redux-offline-docs.

Для автономной документации, пожалуйста, обратитесь к: devdocs

Примеры

Практически все примеры имеют соответствующий CodeSandbox-песочницу. Это интерактивная версия кода, с которой вы можете поэкспериментировать онлайн.

Если вы новичок в экосистеме NPM и испытываете трудности с запуском проекта или не знаете, куда вставить вышеуказанный фрагмент, ознакомьтесь с примером simplest-redux-example, который использует Redux вместе с React и Browserify.

Обсуждение

Присоединяйтесь к каналу #redux сообщества Discord Reactiflux.

Благодарности

Архитектура Elm за отличное введение в моделирование обновлений состояния с помощью редьюсеров;
Переворачивание базы данных наизнанку за то, что потрясло меня;
Разработка ClojureScript с Figwheel за убеждение в том, что повторная оценка должна «просто работать»;
Webpack за Hot Module Replacement;
Flummox за обучение подходу к Flux без избыточного кода или синглтонов;
disto за прототип перезагружаемых хранилищ;
NuclearJS за доказательство производительности этой архитектуры;
Om за популяризацию идеи единственного атома состояния;
Cycle за демонстрацию того, как часто функция является лучшим инструментом;
React за прагматичное новаторство.

Особая благодарность Джейми Патон за предоставление имени пакета NPM redux.

Логотип

Вы можете найти официальный логотип на GitHub.

Журнал изменений

Этот проект соответствует Семантической версии.
Каждый выпуск, вместе с инструкциями по миграции, документирован на странице выпусков на GitHub Releases.

Спонсоры

Работа над Redux была финансирована сообществом.
Познакомьтесь с выдающимися компаниями, которые сделали это возможным:

Посмотреть полный список спонсоров Redux., а также постоянно растущий список людей и компаний, которые используют Redux.

Лицензия

MIT