Original Redux documentation with a translation into Russian
Redux является предсказуемым контейнером состояния для JavaScript приложений.
Это позволяет вам создавать приложения, которые ведут себя одинаково в различных окружениях (клиент, сервер и нативные приложения), а также просто тестируются. Кроме того, это обеспечивает большой опыт отладки, например редактирование кода в реальном времени в сочетании с time traveling.
Вы можете использовать Redux вместе с React или с любой другой view-библиотекой. Это крошечная библиотека (2kB, включая зависимости).
Новинка! Изучайте Redux вместе с его создателем:
Getting Started with Redux (30 бесплатных видео)
“Love what you’re doing with Redux”
Jing Chen, автор Flux
“I asked for comments on Redux in FB's internal JS discussion group, and it was universally praised. Really awesome work.”
Bill Fisher, автор документации Flux
“It's cool that you are inventing a better Flux by not doing Flux at all.”
André Staltz, автор Cycle
Я написал Redux пока работал над моим докладом на React Europe, который назывался “Hot Reloading with Time Travel”. Моей целью было создание библиотеки управления состоянием с минимальным API, но вполне предсказуемым поведением, так чтобы можно было реализовать протоколирование, горячую перезагрузку, путешествия во времени, универсальные приложения, запись и воспроизведение, без каких-либо вложений от разработчика.
Redux развивает идеи Flux, но избегает его сложности, воспользовавшись примерами из Elm. Вне зависимости от того, использовали вы их или нет, Redux занимает всего несколько минут, чтобы начать с ним работу.
Для установки стабильной версии:
npm install --save redux
Скорее всего, вам также понадобится связка с React и инструменты разработчика.
npm install --save react-redux
npm install --save-dev redux-devtools
Предполагается, что вы используете пакетный менеджер npm вместе со сборщиком модулей, типа Webpack или Browserify, использующие CommonJS модули.
Если вы еще не используете npm или современнные сборщики модулей и предпочитаете сборку UMD, что делает Redux доступным в качестве глобального объекта, вы можете использовать предкомпилированную версию с cdnjs. Мы не рекомендуем этот подход для любого серьезного применения, т.к. большинство библиотек используемых с Redux доступны только на npm.
Все состояние вашего приложения сохранено в объекте внутри одного хранилища (store). Единственный способ изменить дерево состояния - это вызвать действие (action), объект описывающий то, что случилось. Чтобы указать, каким образом действия преобразовывают дерево состояния, вы пишете чистые "редюсеры".
Все, готово!
import { createStore } from 'redux'
/**
* Это редюсер - чистая функция в формате(state, action) => state.
* Он описывает то, как действие преобразовывает состояние в следующее состояние
*
* Формат состояния зависит от вас: это может быть примитивом,
* массивом, объектом
* или даже структурой данных Immutable.js.
* Важно только одно, вы не должны изменять объект состояния
* напрямую, а возвращать
* новый объект, если состояние изменилось
*
* В этом примере мы используем `switch` и строки, но вы можете
* использовать хелпер, который следует другому соглашению
* (например, function maps), если это имеет смысл для вашего
* проекта.
*/
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
// Создаем хранилище Redux которое хранит состояние вашего приложения.
// Его API - { subscribe, dispatch, getState }.
let store = createStore(counter)
// Вы можете подписаться на обновления вручную или использовать биндинги к вашему view layer.
store.subscribe(() =>
console.log(store.getState())
)
// Единственный способ изменить внутреннее состояние - это вызвать действие
// Действия могут быть сериализированы, залогированы или сохранены и далее воспроизведены.
store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1Вместо того, что бы изменять состояние напрямую, вы определяете изменения, которые вы хотите произвести, с помощью простых объектов называемых действия. Затем вы пишете специальную функцию, называемую редюсер, чтобы решить, каким образом каждое действие преобразует все состояние приложения.
Если вы пришли из Flux, есть одно важное различие, которое вы должны понимать. Redux не имеет Диспетчера (Dispatcher) или поддержки множества хранилищ. Вместо этого есть только одно хранилище с одной корневой функцией-редюсером. Когда ваше приложение разрастется, вместо добавления хранилищ, вы разделяете корневой редюсер на более мелкие редюсеры, которые независимо друг от друга обслуживают разные части дерева состояния. Это аналогично тому, что в React приложении есть только один корневой компонент, состоящий из множества мелких компонентов.
Эта архитектура может показаться излишней для счетчика приложения, но красота этого шаблона в том, насколько хорошо она масштабируется для больших и сложных приложений. Она также предоставляет очень мощные инструменты для разработчиков, позволяющих проследить каждую мутацию к действию, вызвавшему его. Вы можете записывать пользовательские сессии и воспроизводить их просто переигрывая каждое действие.
Getting Started with Redux - это видео-курс, состоящий из 30 роликов созданных Дэном Абрамовым, автором Redux. Он предназначен для дополнения части документации «Основы», привнося дополнительные сведения о неизменности, тестировании, лучших практиках Redux, а также об использовании Redux с React. Данный курс является и всегда будет бесплатным.
“Great course on egghead.io by @dan_abramov - instead of just showing you how to use #redux, it also shows how and why redux was built!”
Sandrino Di Mattia
“Plowing through @dan_abramov 'Getting Started with Redux' - its amazing how much simpler concepts get with video.”
Chris Dhanaraj
“This video series on Redux by @dan_abramov on @eggheadio is spectacular!”
Eddie Zaneski
“This series of videos on Redux by @dan_abramov is repeatedly blowing my mind - gunna do some serious refactoring”
Laurence Roberts
И так, чего же вы ждете?
Если вам понравился мой курс, подумайте о поддержке Egghead путем [покупки подписки] (https://egghead.io/pricing). Подписчики имеют доступ к исходному коду, для примера, в каждом из моих видео, а также к массе продвинутых уроков по другим темам, включая JavaScript in depth, React, Angular и многое другое. Многие [преподаватели Egghead] (https://egghead.io/instructors) также являются авторами библиотек с открытым исходным кодом, т.ч. покупка подписки - это хороший способ поблагодарить их за работу, которую они сделали.
Для экпорта в PDF, ePub MOBI или чтения в оффлайн и инструкциям, как это можно осуществить, обратите внимание на: paulkogel/redux-offline-docs.
- Counter Vanilla (source)
- Counter (source)
- Todos (source)
- Todos with Undo (source)
- TodoMVC (source)
- Shopping Cart (source)
- Tree View (source)
- Async (source)
- Universal (source)
- Real World (source)
Если вы новичок в экосистеме NPM и имеете проблемы с получением и запуском проекта или не уверены, куда вставить шаблон, попробуйте simplest-redux-example который использует Redux вместе с React и Browserify.
Подключайтесь к каналу #redux находящегося в Discord сообществе Reactiflux.
- The Elm Architecture за великолепное введение в моделирование обновления состояния посредством редюсеров;
- Turning the database inside-out за взрыв моего сознания;
- Developing ClojureScript with Figwheel за убеждение меня в том, что переоценка должна "просто работать";
- Webpack за Hot Module Replacement;
- Flummox за обучение меня подходу Flux без шаблонов или синглетонов;
- disto за доказательство концепции "hot reloadable" хранилищ;
- NuclearJS за доказательство того, что такая архитектура может быть производительной;
- Om за популяризацию идеи одного атома состояния;
- Cycle за демонстрацию того, как часто функция является лучшим инструментом;
- React за прагматические инновации.
Особенная благодарность Jamie Paton за передачу прав на redux NPM пакет.
Это проект придерживается принципов семантического версионирования.
Каждый релиз, вместе с инструкциями миграции, документированы на странице релизов Github.
Разработка Redux была профинансирована сообществом.
Познакомьтесь с некоторыми из выдающихся компаний, которые сделали это возможным:
См. полный список меценатов Redux.
MIT