Redux-in-russian
Оригинальная документация по Redux с переводом на русский
Redux является предсказуемым контейнером состояния для JavaScript приложений. (Не путайте с WordPress фреймворком – Redux Framework.)
Это позволяет вам создавать приложения, которые ведут себя одинаково в различных окружениях (клиент, сервер и нативные приложения), а также просто тестируются. Кроме того, это обеспечивает большой опыт отладки, например редактирование кода в реальном времени в сочетании с time traveling.
Вы можете использовать Redux вместе с React или с любой другой view-библиотекой. Это крошечная библиотека (2kB, включая зависимости).
Примечание: В настоящее время мы планируем переписать документацию Redux. Пожалуйста, уделите некоторое время заполните этот опрос, чтобы узнать, какой контент наиболее важен на сайте документации. Спасибо!
Изучите Redux
У нас есть множество доступных ресурсов, которые помогут вам изучить Redux, независимо от того, каков ваш уровень знаний или стиль обучения.
Только основы
Если вы новичок в Redux и хотите понять основные понятия, см:
- Мотивация написания Redux, Основные понятия и Три принципа.
- Базовое руководство в документации Redux
- Бесплатная видео-серия "Getting Started with Redux" на Egghead.io от создателя Redux Дэна Абрамова
- Слайдшоу "Redux Fundamentals" а также список полезных ресурсов для изучения Redux от одного из разработчиков Redux - Марка Эриксона
- Если вы лучше учитесь просматривая код и играя с ним, ознакомьтесь с нашим списком примеров Redux приложений, доступных в качестве отдельных проектов в репозитории Redux, а также в качестве интерактивных примеров на CodeSandbox.
- Руководства по Redux в секции списка ссылок React/Redux. Вот список рекомендуемых нами учебников:
- Посты Dave Ceddia What Does Redux Do? (and when should you use it?) и How Redux Works: A Counter-Example являются отличным введением к основам Redux и как использовать его с React, как и этот пост React and Redux: An Introduction.
- Пост Valentino Gagliardi React Redux Tutorial for Beginners: Learning Redux in 2018 является отличным расширенным введением во многие аспекты использования Redux.
- Статья на CSS Tricks Leveling Up with React: Redux хорошо раскрывает основы Redux.
- Это руководство DevGuides: Introduction to Redux раскрывает различные аспекты Redux, включая экшены, редюсеры, мидлвары, использование с React.
Средний уровень
Когда вы освоите основы работы с экшенами, редюсерами и стором, у вас могут возникнуть вопросы по таким темам, как работа с асинхронной логикой и AJAX-запросами, подключение UI фреймворка, например React, к вашему стору Redux и настройка приложения для использования Redux:
- Раздел документации "Продвинутое использование" раскрывает работу с асинхронной логикой, мидлвар, маршрутизацию.
- Страница документации "Образовательные ресурсы" указывает на рекомендуемые статьи по различным темам, связанным с Redux.
- Серия статей из 8 частей от Sophie DeBenedetto Building a Simple CRUD App with React + Redux показывает, как собрать базовое приложение CRUD с нуля.
Использование в реальном мире
Переход от приложения TodoMVC, к реальному production-приложению, может стать большим скачком, но у нас есть много ресурсов, которые помогут:
- Бесплатная видеосерия "Building React Applications with Idiomatic Redux" от создателя Redux Дэна Абрамова, основывается на его первой серии видео и охватывает такие темы, как мидлвары, маршрутизация и постоянство.
- Redux FAQ отвечает на многие базовые вопросы, связанные с использованием Redux, а также секция документации "Рецепты" которая содержит информацию об обработке полученных данных, тестирование, структурирование логики редюсеров и уменьшении шаблонности.
- Серия руководств "Practical Redux" от одного из разработчиков Redux Марка Эриксона, демонстрирует практические техники среднего и продвинутого уровня для работы с React и Redux (также доступен в виде интерактивного курса на Educative.io) -Список ссылок React/Redux содержит классифицированные статьи о работе с редюсерами и селекторами, управление сайд-эффектами, архитектуре и лучшим практикам Redux, и т.д.
- Наше сообщество создало тысячи библиотек, дополнений и инструментов, связанных с Redux. Страница документации "Экосистема" перечисляет наши рекомендации и есть полный список, доступный в Redux addons catalog.
- Если вы хотите учиться на реальной кодовой базе приложений, каталог дополнений также содержит список специально написанных и реальных приложений.
Наконец, Марк Эриксон проводит серию воркшопов по Redux при помощи Workshop.me. Проверьте расписание воркшопов для предстоящих дат и местоположений.
Помощь и обсуждения
Канал #redux, как часть Reactiflux Discord community, наш официальный ресурс для всех вопросов связанных с изучением и использованием Redux. Reactiflux - отличное место для того, чтобы общаться, задавать вопросы и учиться - присоединяйтесь к нам!
Прежде чем продолжить
Redux - это ценный инструмент для управления вашим состоянием, но вы также должны учитывать, подходит ли он для вашей ситуации. Не используйте Redux только потому, что кто-то сказал, что вам нужно - потратьте некоторое время, чтобы понять потенциальные выгоды и компромиссы с его использованием.
Вот несколько советов о том, когда имеет смысл использовать Redux:
- У вас есть обоснованные объемы данных, меняющихся со временем
- Вам нужен один источник информации для вашего состояния
- Вы приходите к выводу, что сохранять все ваше состояние в компоненте верхнего уровня уже недостаточно
Да, эти рекомендации являются субъективными и расплывчатыми, но это справедливо. Точка, в которой вы должны интегрировать Redux в ваше приложение, отличается для каждого пользователя и каждого приложения.
Дополнительные сведения о том, как использовать Redux, см:
Опыт разработки
Дэн Абрамов, автор Redux, написал Redux пока работал над своим докладом на React Europe, который назывался “Hot Reloading with Time Travel”. Его целью было создание библиотеки управления состоянием с минимальным API, но вполне предсказуемым поведением, так чтобы можно было реализовать протоколирование, горячую перезагрузку, путешествия во времени, универсальные приложения, запись и воспроизведение, без каких-либо вложений от разработчика.
Влияния
Redux развивает идеи Flux, но избегает его сложности, воспользовавшись примерами из Elm. Вне зависимости от того, использовали вы их или нет, Redux занимает всего несколько минут, чтобы начать с ним работу.
Установка
Для установки стабильной версии:
npm install --save redux
Предполагается, что вы используете npm в качестве менеджера пакетов.
Если нет, то вы можете получить доступ к этим файлам на unpkg, загрузить их или настроить ваш пакетный менеджер.
Чаще всего люди используют Redux, как набор CommonJS модулей. Эти модули - это то, что вы получаете, когда импортируете redux
в Webpack, Browserify или Node окружение. Если вам нравится жить на острие технологий и использовать Rollup, мы также поддерживаем это.
Если вы не используете сборщики модулей, это тоже нормально. Npm пакет redux
включает предкомпилированные UMD develop и production сборки в каталоге 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] (https://webpack.js.org/) и [Browserify] (http://browserify.org/) для наиболее комфортной разработки.
Основные принципы
Все состояние вашего приложения сохранено в объекте внутри одного стора (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)
// Вы можете использовать subscribe() для обновления UI в ответ на изменения состояния.
// Обычно вы должны использовать библиотеку привязки (например, React Redux), а не использовать subscribe() напрямую.
// Однако также может быть полезно сохранить текущее состояние в localStorage.
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 приложении есть только один корневой компонент, состоящий из множества мелких компонентов.
Эта архитектура может показаться излишней для счетчика приложения, но красота этого шаблона в том, насколько хорошо она масштабируется для больших и сложных приложений. Она также предоставляет очень мощные инструменты для разработчиков, позволяющих проследить каждую мутацию к экшену, вызвавшему его. Вы можете записывать пользовательские сессии и воспроизводить их просто переигрывая каждый экшена.
Изучайте Redux вместе с его авторами
Видео уроки Redux от Dan Abramov
Getting Started with Redux
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
И так, чего же вы ждете?
Посмотрите 30 бесплатных уроков "Getting Started with Redux"!
Note: Если вам понравился мой курс, подумайте о поддержке Egghead путем [покупки подписки] (https://egghead.io/pricing). Подписчики имеют доступ к исходному коду, для примера, в каждом из моих видео, а также к массе продвинутых уроков по другим темам, включая JavaScript in depth, React, Angular и многое другое. Многие [преподаватели Egghead] (https://egghead.io/instructors) также являются авторами библиотек с открытым исходным кодом, т.ч. покупка подписки - это хороший способ поблагодарить их за работу, которую они сделали.
Создание React приложений с помощью Redux
Building React Applications with Idiomatic Redux - это вторая бесплатная видео серия от Дэна Абрамова. Он продолжает темы, начатые в первой серии и охватывает практические технологии, необходимые для создания ваших приложений React и Redux: усовершенствованное управление состоянием, мидлвары, интеграция React Router и другие общие проблемы, с которыми вы, вероятно, столкнетесь при создании приложений для своих клиентов и заказчиков. Как и в первой серии, этот курс всегда будет бесплатным.
Смотрите бесплатный видео курс "Idiomatic Redux"
Практический курс Redux
Практический Redux - платный интерактивный курс одного из главных разработчиков Redux Mark Erikson. Курс предназначен для того, чтобы показать, как применять базовые концепции Redux к созданию чего-то большего, чем приложение TodoMVC. Он включает в себя такие реальные темы, как:
- Добавление Redux к новому проекту Create-React-App и настройка Hot Module Replacement для более быстрой разработки
- Управление вашим пользовательским интерфейсом с помощью Redux
- Использование библиотеки Redux-ORM для управления связанными данными в вашем Redux-сторе
- Создание главного/детального представления для отображения и редактирования данных
- Написание специальной усовершенствованной логики редюсера Redux для решения конкретных задач
- Оптимизация производительности подключенных к Redux полей формы
И многое другое!
Курс основывается на оригинальной бесплатной учебной серии «Практический Redux», но с обновленным и улучшенным контентом.
Воркшопы Redux
Марк Эриксон - один из разработчиков Redux Mark Erikson совместно с Workshop.me проводит серию воркшопов по Redux
Первый семинар Redux Fundamentals состоится в Нью-Йорке, 19-20 апреля и будет знакомить со следующими темами:
- История и цель Redux
- Редюсеры, экшены и работа с Redux-стором
- Использование Redux с React
- Использование и написание мидлвар для Redux
- Работа с вызовами AJAX и другими побочными эффектами
- Тестирование приложений Redux
- Реальная структура и разработка приложений Redux
Билеты по-прежнему доступны и их можно приобрести через Workshop.me
Документация
- Введение
- Основы
- Продвинутое использование
- Рецепты
- FAQ
- Поиск неисправностей
- Глоссарий
- Справочник по API
Для экпорта в PDF, ePub MOBI или чтения в оффлайн и инструкциям, как это можно осуществить, обратите внимание на: paulkogel/redux-offline-docs.
Для документации в Offline, пожалуйста посмотрите: devdocs
Примеры
Почти все примеры имеют соответствующую песочницу CodeSandbox. Это интерактивная версия кода, с которой вы можете играть онлайн.
- Counter Vanilla: Source
- Counter: Source | Sandbox
- Todos: Source | Sandbox
- Todos with Undo: Source | Sandbox
- TodoMVC: Source | Sandbox
- Shopping Cart: Source | Sandbox
- Tree View: Source | Sandbox
- Async: Source | Sandbox
- Universal: Source
- Real World: Source | Sandbox
Если вы новичок в экосистеме NPM и имеете проблемы с получением и запуском проекта или не уверены, куда вставить шаблон, попробуйте simplest-redux-example который использует Redux вместе с React и Browserify.
Отзывы
“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, creator of Cycle
Благодарности
- 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 пакет.
Logo
Вы можете найти официальное лого на GitHub.
История изменений
Это проект придерживается принципов семантического версионирования. Каждый релиз, вместе с инструкциями миграции, документированы на странице релизов Github.
Меценаты
Разработка Redux была профинансирована сообществом. Познакомьтесь с некоторыми из выдающихся компаний, которые сделали это возможным:
См. полный список меценатов Redux., а также постоянно растущий список людей и компаний, которые используют Redux.
License
MIT