Redux in Russian
  • Read Me
  • Introduction
    • Motivation
    • Core Concepts
    • Three Principles
    • Prior Art
    • Learning Resources
    • Ecosystem
    • Examples
  • Basics
    • Actions
    • Reducers
    • Store
    • Data Flow
    • Usage with React
    • Example: Todo List
  • Advanced
    • Async Actions
    • Async Flow
    • Middleware
    • Usage with React Router
    • Example: Reddit API
    • Next Steps
  • Recipes
    • Configuring Your Store
    • Migrating to Redux
    • Using Object Spread Operator
    • Reducing Boilerplate
    • Server Rendering
    • Writing Tests
    • Computing Derived Data
    • Implementing Undo History
    • Isolating Subapps
    • Structuring Reducers
      • Prerequisite Concepts
      • Basic Reducer Structure
      • Splitting Reducer Logic
      • Refactoring Reducers Example
      • Using combineReducers
      • Beyond combineReducers
      • Normalizing State Shape
      • Updating Normalized Data
      • Reusing Reducer Logic
      • Immutable Update Patterns
      • Initializing State
    • Using Immutable.JS with Redux
  • FAQ
    • General
    • Reducers
    • Organizing State
    • Store Setup
    • Actions
    • Immutable Data
    • Code Structure
    • Performance
    • Design Decisions
    • React Redux
    • Miscellaneous
  • Troubleshooting
  • Glossary
  • API Reference
    • createStore
    • Store
    • combineReducers
    • applyMiddleware
    • bindActionCreators
    • compose
  • Change Log
  • Patrons
  • Feedback
Powered by GitBook
On this page
  • Изучите Redux
  • Только основы
  • Промежуточные концепции
  • Использование в реальном мире
  • Помощь и обсуждения
  • Перед тем как начать
  • Восприятие со стороны разработчика
  • Влияния
  • Установка
  • Дополнительные пакеты
  • Основные принципы
  • Изучайте Redux вместе с его создателями
  • Видеоуроки Redux от Дэна Абрамова
  • Практический курс Redux
  • Воркшопы Redux
  • Documentation
  • Примеры
  • Отзывы
  • Благодарности
  • Логотип
  • История изменений
  • Меценаты
  • Лицензия

Read Me

NextIntroduction

Last updated 6 years ago

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

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

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

Изучите Redux

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

Только основы

Если вы новичок в Redux и хотите понять основные понятия, посмотрите

  • Бесплатная серия видеоуроков на Egghead.io от создателя Redux Дэна Абрамова

  • [Слайдшоу "Redux Fundamentals"]() от со-разработчика Redux Марка Эриксона, а также

  • Если вы лучше учитесь, просматривая код и играя с ним, ознакомьтесь с нашим списком ,доступных в качестве отдельных проектов в репозитории Redux, а также в качестве интерактивных онлайн-примеров на CodeSandbox.

  • Раздел в . Вот список рекомендуемых нами учебных материалов:

    • Посты Дэйва Седдиа (Dave Ceddia) и — отличное введение в основы Redux и как использовать его с React, как и пост .

    • Пост Валентино Гальярди (Valentino Gagliardi) — отличное расширенное введение во многие аспекты использования Redux.

    • Статья на CSS Tricks также хорошо освещает основы Redux.

    • Интерактиное руководство раскрывает различные аспекты Redux, включая действия, редюсеры, мидлвары, использование с React.

Промежуточные концепции

Когда вы изучите основы работы с действиями, редюсерами и хранилищем, у вас могут возникнуть вопросы по таким темам, как работа с асинхронной логикой и AJAX-запросами, подключение UI-фреймворка, такого как React, к вашему хранилищу Redux, и настройка приложения для использования с Redux:

Использование в реальном мире

Переход от приложения TodoMVC, к реальному production приложению, может стать большим скачком, но у нас есть много ресурсов, которые помогут:

Помощь и обсуждения

Перед тем как начать

Redux is a valuable tool for organizing your state, but you should also consider whether it's appropriate for your situation. Don't use Redux just because someone said you should - take some time to understand the potential benefits and tradeoffs of using it.

Here are some suggestions on when it makes sense to use Redux:

  • You have reasonable amounts of data changing over time

  • You need a single source of truth for your state

  • You find that keeping all your state in a top-level component is no longer sufficient

Yes, these guidelines are subjective and vague, but this is for good reason. The point at which you should integrate Redux into your application is different for every user and different for every application.

For more thoughts on how Redux is meant to be used, see:

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

Следующие несколько советов относительно того, когда имеет смысл использовать Redux:

  • У вас есть обоснованные объёмы данных, меняющихся со временем

  • Вам нужен единственный источник информации для вашего состояния

  • Вы понимаете, что сохранение всего вашего состояния в компоненте верхнего уровня уже недостаточно

Да, эти рекомендации являются субъективными и расплывчатыми, но не без веских причин. Момент, в которой вам потребуется интегрировать Redux в ваше приложение, отличается у каждого пользователя и неодинаковый для каждого приложения.

Дополнительные сведения о том, как использовать Redux, см:

Восприятие со стороны разработчика

Влияния

Установка

Для установки стабильной версии:

npm install --save redux

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

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

Основные принципы

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

Вот так!

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 от Дэна Абрамова

Начало работы с Redux

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

Создание React-приложений с помощью Redux

Практический курс Redux

  • Добавление Redux к новому проекту Create-React-App и настройка горячей замены модулей (Hot Module Replacement) для более быстрой разработки

  • Управление пользовательским интерфейсом с помощью Redux

  • Использование библиотеки Redux-ORM для управления связанными данными в хранилище Redux

  • Создание главного/детального представления для отображения и редактирования данных

  • Написание пользовательской усовершенствованной логики редюсера Redux для решения конкретных проблем

  • Оптимизация производительности подключенных к Redux полей формы

И многое другое!

Воркшопы Redux

  • История и цель Redux

  • Редюсеры, действия и работа с хранилищем Redux

  • Использование Redux с React

  • Использование и написание мидлвара для Redux

  • Работа с вызовами AJAX и другими побочными эффектами

  • Тестирование приложений Redux

  • Реальные приложения на Redux и их разработка

Documentation

Примеры

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

Отзывы

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

Логотип

История изменений

Меценаты

Лицензия

MIT

озватывает работу с асинхронной логикой, мидлваром, маршрутизацию.

The Redux docs page points to recommended articles on a variety of Redux-related topics.

Sophie DeBenedetto's 8-part series shows how to put together a basic CRUD app from scratch.

от создателя Redux Дэна Абрамова, основывается на его первой серии видеоуроков и охватывает такие темы, как мидлвары, маршрутизация и постоянное хранение (persistence).

даёт ответы на многие распространённые вопросы, связанные с использованием Redux, а также , которая содержит информацию по обработке полученных данных, тестированию, структурированию логики редюсеров и уменьшении шаблонного кода (boilerplate).

от одного из разработчиков Redux Марка Эриксона, демонстрирует реальные практические техники среднего и продвинутого уровня для работы с React и Redux (также доступен в виде )

- содержит упорядоченный по категориям список статей по работе с , , и т.д.

Наше сообщество создало тысячи библиотек, дополнений и инструментов, связанных с Redux. перечисляет наши рекомендации, а также имеется полный список, доступный в .

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

Наконец, Марк Эриксон проводит серию . Посмотрите для получения информации о предстоящих дат и мест проведения.

— это наш официальный ресурс для всех вопросов связанных с изучением и использованием Redux. Reactiflux — отличное место для того, чтобы общаться, задавать вопросы и учиться — присоединяйтесь к нам!

Дэн Абрамов (автор Redux) написал Redux пока работал над своим докладом на React Europe . Его целью было создание библиотеки управления состоянием с минимальным API, но полностью предсказуемым поведением, так чтобы можно было реализовать логирование, горячую перезагрузку, отладку в обратном направлении, универсальные приложения, запись и воспроизведение, без какого-либо участия от разработчика.

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

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

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

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

Если вы не используете сборщики модулей, это тоже прекрасно. npm-пакет redux включает предварительно скомпилированный сборки для разработки и продакшена в . Они могут быть использованы напрямую без сборщика и, таким образом, совместимы со многими популярными загрузчиками JavaScript-модулей и окружениями. Например, вы можете подключить UMD-сборку на страницу при помощи или . Сборки UMD делают Redux доступным через глобальную переменную window.Redux.

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

Скорее всего, вам также понадобится и .

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

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

Sandrino Di Mattia

Chris Dhanaraj

Eddie Zaneski

Dan

Laurence Roberts

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

— это вторая бесплатная серия видеоуроков от Дэна Абрамова. Он продолжает темы, начатые в первой серии и охватывает практические технологии, используемые в продакшене, необходимые для создания ваших приложений React и Redux: усовершенствованное управление состоянием, мидлвары, интеграция React Router и другие распространённые проблемы, с которыми вы, вероятно, столкнетесь при создании приложений для своих клиентов и заказчиков. Как и первая серия, этот курс всегда будет бесплатным.

— платный интерактивный курс одного из главных разработчиков Redux . Курс предназначен для того, чтобы показать, как применять базовые концепции Redux к созданию чего-то большего, чем приложение TodoMVC. Он включает в себя такие реальные темы, как:

Курс основывается на оригинальной бесплатной учебной серии , но с обновлённым и улучшенным контентом.

Один из разработчиков Redux совместно с проводит серию воркшопов по Redux

Первый семинар и познакомил со следующими темами:

Билеты по-прежнему доступны и их

Обратите внимание на для экпорта в PDF, ePub и MOBI для офлайн-чтения, там вы найдете инструкции, как это можно сделать.

Для документации в режиме офлайн смотрите

:

: |

: |

: |

: |

: |

: |

: |

:

: |

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

Jing Chen, автор Flux

Bill Fisher, автор документации Flux

André Staltz, creator of Cycle

за великолепное введение в моделирование обновления состояния посредством редюсеров;

за взрыв моего сознания;

за убеждение меня в том, что переоценка должна "просто работать";

за Hot Module Replacement;

за обучение меня подходу Flux без шаблонного кода (boilerplate) или синглтонов;

за доказательство концепции хранилищ "hot reloadable";

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

за популяризацию идеи одного атома состояния;

за демонстрацию того, как часто функция является лучшим инструментом;

за прагматические инновации.

Особая благодарность за передачу прав на название redux для NPM-пакета.

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

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

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

, а также постоянно растущий список .

Раздел документации "Продвинутое использование"
"Learning Resources"
Building a Simple CRUD App with React + Redux
Бесплатная видеосерия "Building React Applications with Idiomatic Redux"
Redux FAQ
секция документации "Рецепты"
Серия обучающих материалов "Practical Redux"
интерактивного курса на Educative.io
Список ссылок React/Redux
редюсерами и селекторами
управление побочными эффектами
архитектурой и передовым практикам Redux
Страница документации "Экосистема"
репозитории каталога дополнений Redux
специально написанных реальных приложений
Канал #redux
сообщества Reactiflux Discord
You Might Not Need Redux
The Tao of Redux, Part 1 - Implementation and Intent
The Tao of Redux, Part 2 - Practice and Philosophy
Redux FAQ
You Might Not Need Redux
The Tao of Redux, Part 1 - Implementation and Intent
The Tao of Redux, Part 2 - Practice and Philosophy
Redux FAQ
“Hot Reloading with Time Travel”
Flux
Elm
npm
получить доступ к этим файлам на unpkg
CommonJS
Webpack
Browserify
Rollup
UMD
каталоге dist
тега <script>
установить при помощи Bower
любом современном браузере
начать пользоваться Redux
связка (bindings) с React
инструменты разработчика
Webpack
Browserify
Getting Started with Redux
“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!”
“Plowing through @dan_abramov 'Getting Started with Redux' - its amazing how much simpler concepts get with video.”
“This video series on Redux by @dan_abramov on @eggheadio is spectacular!”
“Come for the name hype. Stay for the rock solid fundamentals. (Thanks, and great job @dan_abramov and @eggheadio!)”
“This series of videos on Redux by @dan_abramov is repeatedly blowing my mind - gunna do some serious refactoring”
Посмотрите 30 бесплатных уроков "Getting Started with Redux"!
покупки подписки
преподаватели Egghead
Building React Applications with Idiomatic Redux
Посмотрите бесплатный видео курс "Idiomatic Redux"
Практический Redux
Марка Эриксона
«Практический Redux»
Mark Erikson
Workshop.me
Redux Fundamentals состоялся в Нью-Йорке 19-20 апреля
можно приобрести через Workshop.me
Введение
Основы
Продвинутое использовани
Рецепты
FAQ
Troubleshooting
Глоссарий
Справочник API
paulkogel/redux-offline-docs
devdocs
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
simplest-redux-example
“Love what you’re doing with Redux”
“I asked for comments on Redux in FB's internal JS discussion group, and it was universally praised. Really awesome work.”
“It's cool that you are inventing a better Flux by not doing Flux at all.”
The Elm Architecture
Turning the database inside-out
Developing ClojureScript with Figwheel
Webpack
Flummox
disto
NuclearJS
Om
Cycle
React
Jamie Paton
на GitHub
семантического версионирования
релизов
профинансирована сообществом
Webflow
Ximedes
См. полный список меценатов Redux.
людей и компаний, которые используют Redux
расписание воркшопов
воркшопов по Redux при помощи Workshop.me
Redux Framework
редактирование кода в режиме реального времени в сочетании c отладчиком c возможностью отладки в обратном направлении (time traveling debugger)
React
Начальное руководство в документации Redux
"Getting Started with Redux"
http://blog.isquaredsoftware.com/2018/03/presentation-reactathon-redux-fundamentals/
рекомендуемый список для изучения Redux
примеров приложений на Redux
Redux Tutorials
списке ссылок React/Redux
What Does Redux Do? (and when should you use it?)
How Redux Works: A Counter-Example
React and Redux: An Introduction
React Redux Tutorial for Beginners: Learning Redux in 2018
Leveling Up with React: Redux
DevGuides: Introduction to Redux
build status
npm version
npm downloads
redux channel on discord
Changelog #187