Как сделать свой редукс

Обновлено: 28.04.2024

Оригинальная документация по Redux с переводом на русский

Redux - это предсказуемое хранилище состояния для JavaScript приложений. (Не путайте с WordPress фреймворком – Redux Framework.)

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

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

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

Для самой библиотеки Redux:

Для более подробной информации, смотри страницу установки.

Учебное пособие по основам Redux

Redux Essentials tutorial - это пособие по основам, которое учит вас, как использовать Redux правильно, используя наши последние рекомендуемые API и лучшие практики. Мы рекомендуем начать с этого.

Базовое руководство по Redux

Дополнительные учебные пособия

Репозиторий Redux, содержит несколько примеров проектов, демонстрирующих различные аспекты использования Redux. Почти во всех примерах есть соответствующая песочница CodeSandbox. Это интерактивная версия кода, которую можно попробовать онлайн. Смотрите полный список на странице Примеров.
видеокурсы на Egghead.io, от создателя Redux Dan Abramov бесплатный "Getting Started with Redux" и Building React Applications with Idiomatic Redux
от разработчика Redux Mark Erikson - доклад с конференции "Redux Fundamentals" и слайды воркшопа "Redux Fundamentals"
Пост Dave Ceddia A Complete React Redux Tutorial for Beginners

Redux FAQ отвечает на многие распространенные вопросы о том, как использовать Redux и Использование Redux содержит информацию об обработке полученных данных, тестировании, структурировании логики редьюсеров и сокращении шаблонов.
Серия учебных пособий от разработчика Redux Mark Erikson Practical Redux демонстрирует реальные промежуточные и продвинутые методы работы с React и Redux (также доступны в качества интерактивного курса на Educative.io). ** содержит категоризированные статьи о работе с редьюсрами и селекторами, управлению сайд-эффектами, архитектуре Redux architecture и лучшим практиками и т.д.
Наше сообщество создало тысячи связанных с Redux библиотек, надстроек и инструментов. Экосистема перечисляет наши рекомендации, а также есть полный список, доступный в Redux addons catalog.

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

Прежде чем продолжить

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

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

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

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

When (and when not) to reach for Redux
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

Дэн Абрамов, автор Redux, написал Redux пока работал над своим докладом на React Europe, который назывался “Hot Reloading with Time Travel”. Его целью было создание библиотеки управления состоянием с минимальным API, но вполне предсказуемым поведением, так чтобы можно было реализовать протоколирование, горячую перезагрузку, путешествия во времени, универсальные приложения, запись и воспроизведение, без каких-либо вложений от разработчика.

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

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

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

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

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

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

за великолепное введение в моделирование обновления состояния посредством редьюсеров; за взрыв моего сознания; за убеждение меня в том, что переоценка должна "просто работать"; за Hot Module Replacement; за обучение меня подходу Flux без шаблонов или синглетонов; за доказательство концепции "hot reloadable" сторов; за доказательство того, что такая архитектура может быть производительной; за популяризацию идеи одного атома состояния; за демонстрацию того, как часто функция является лучшим инструментом; за прагматические инновации.

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

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

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

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

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

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

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

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

Из чего состоит Flux-архитектура

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

Действия котика и его состояние составляют сущность его существа. Мы можем смоделировать такое поведение и в наших программах с помощью компонентов. Каждый компонент содержит необходимые данные и определяет методы их изменения. Такой компонентный подход может быть реализован в архитектуре MVC.

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

Во Flux-архитектуре такое глобальное состояние предложено вынести в хранилища, отделить его от компонентов. А изменение состояния производить через специальные ворота, называемые диспетчерами. В этом случае поток управления меняет направление: изменение состояния переходит от представлений к диспетчеру, а новое состояние предоставляется всем представлениям сразу.

Во Flux-архитектуре состояние является общим для многих представлений.

Что такое Redux?

Flux-архитектура — это идея. Идею можно реализовать разными способами, и один из них — Redux.

Redux — это реализация Flux на JavaScript. Эту реализацию удобно применять в веб-приложениях для управления общим глобальным состоянием. У неё есть специальная привязка для использования с React, о которой мы поговорим позднее.

Redux удобно использовать, когда

Требуется синхронизировать состояние между многими компонентами;
Постоянно приходится контролировать изменение состояния во времени — time travel debug;
Приходится перехватывать и вмешиваться в процесс изменения состояния используя middleware.

Использовать Redux можно и в vanila javascript приложениях. Для этого надо подключить библиотеку, например, из CDN.

Познакомимся поближе с составными частями Redux.

Анатомия Redux — action, store, reducer, dispatch.

В этом разделе соберём небольшое приложение, чтобы посмотреть на то, как части Redux взаимодействуют между собой. Предположим, нашему приложению требуется следить за нажатиями мыши на экране и вести журнал.

Action

Как и в оригинальной идее Flux, у Redux есть понятие действия — Action . Action это обычный объект JavaScript. Этот объект попадается на глаза разработчику дважды. В первый раз, когда JavaScript реагирует на событие, а во второй раз, когда сведения из объекта встраиваются в хранилище.

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

reducer

Написанная нами функция createMouseClickAction возвращает объект с двумя полями — type и payload . Мы можем использовать полученный объект, чтобы обновить наш список. Реализуем это обновление в специальной функции. Допустим, что в параметрах она будет получать текущий список и наш объект и добавлять payload в конец списка.

Мы назвали функцию обновления состояния reducer , но это просто дань традиции. Всё же функция имеет определенные особенности. Она

Не обновляет полученный массив, а копирует его;
Проверяет тип аргумента action;
Возвращает исходное состояние, если action не понятен.

store

В составе библиотеки redux.js есть функция создания хранилища createStore . Используем её для создания хранилища и подключим к нему несколько представлений, которые создадим такой функцией.

dispatch

На этом приложение закончено. Работающий пример и полный код примера можно найти на JSFiddle .

Всё то же самое, но в связке с React

Redux создавали для использования вместе с React, а сама связка помещена создателями в пакет react-redux. В нём содержатся сервисные функции для удобства использования store.subscribe , store.dispatch . Доступны два стиля их использования:

Функция connect создает обертку вокруг вашего компонента и подключает его к хранилищу.
Хуки useDispatch, useSelector делают ту же работу, но для функциональных компонентов.

Реализуем в React ту же функциональность, что и в предыдущем разделе. Дополнительно нам потребуется библиотека react-redux .

Функции createMouseClickAction и reducer остаются без изменений.

Вместо createView мы создадим компонент View:

В этом коде сравните строки

из предыдущего примера.

Вместо прямого подключения обработчика событий используем useEffect для своевременного снятия обработчика.

Обратите внимание на способ получения функции dispatch .

Функции useSelector и useDispatch могут выполнять свою роль, только если мы правильно присоединим React-приложение к хранилищу store нашего Redux.

Вы помните, что в предыдущем приложении мы создавали хранилище так:

const store = Redux.createStore(reducer) .

В этот раз ничего не поменялось. А вот созданное хранилище мы подключим к приложению React с помощью ReactRedux.Provider .

На этом всё — мы сделали такое же приложение, только на React. Собранное работающее приложение можно найти на JSFiddle .

В качестве самостоятельной работы попробуйте модифицировать пример так, чтобы в левой части страницы перечислялись записи от нажатии мыши в левой части экрана, а в правом view — правые клики.

Альтернативы Redux

Redux — далеко не единственная возможность управления глобальным состоянием.

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

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

Redux — не лучшее решение для ситуации, когда глобальное состояние — более глобальное, чем окно браузера.

Поэтому следует знать о альтернативных возможностях управления состоянием

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

В видеокурсе мы с вами научимся работать с библиотекой Redux, которая отлично дополняет библиотеку React JS. Redux отвечает за функциональную часть на сайте, в то время как React JS отвечает за красивый вид.

Видеоурок

Redux - отличная библиотека, которую необходимо дополнительно изучить, если вы хотите создавать большие проекты при помощи React JS.

Redux невозможно представить без React JS, поэтому если вы ещё не знакомы с React JS, то изначально посмотрите курс по React. Посмотреть полный видеокурс можно у нас на сайте по этой ссылке .

Задание к уроку

Важно понимать для чего предназначен Redux и какую функцию он выполняет. Опишите своими словами что такое Redux.

Redux отвечает за функциональную часть на сайте. Он предназначен для связи множества компонентов и создания логики между ними. Благодаря Redux написание крупных веб ресурсов становиться намного проще и логичнее, нежели на чистом React JS.

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

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

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

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

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

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

Посты Дэйва Седдиа (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.

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

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

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

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

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

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

Серия обучающих материалов "Practical Redux" от одного из разработчиков Redux Марка Эриксона, демонстрирует реальные практические техники среднего и продвинутого уровня для работы с React и Redux (также доступен в виде интерактивного курса на Educative.io )

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

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

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.

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.

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

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

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

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

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

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

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

Читайте также: