redux что это javascript

Краткое руководство по Redux для начинающих

redux что это javascript. Смотреть фото redux что это javascript. Смотреть картинку redux что это javascript. Картинка про redux что это javascript. Фото redux что это javascript

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

Примечание Вы читаете улучшенную версию некогда выпущенной нами статьи.
Содержание:

Когда нужно пользоваться Redux?

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

Простым приложениям Redux не нужен.

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

Разберём основные концепции библиотеки Redux, которые нужно понимать начинающим.

Неизменяемое дерево состояний

В Redux общее состояние приложения представлено одним объектом JavaScript — state (состояние) или state tree (дерево состояний). Неизменяемое дерево состояний доступно только для чтения, изменить ничего напрямую нельзя. Изменения возможны только при отправке action (действия).

Действия

Действие (action) — это JavaScript-объект, который лаконично описывает суть изменения:

Типы действий должны быть константами

В простом приложении тип действия задаётся строкой. По мере разрастания функциональности приложения лучше переходить на константы:

и выносить действия в отдельные файлы. А затем их импортировать:

Генераторы действий

Генераторы действий (actions creators) — это функции, создающие действия.

Обычно инициируются вместе с функцией отправки действия:

Или при определении этой функции:

Редукторы

При запуске действия обязательно что-то происходит и состояние приложения изменяется. Это работа редукторов.

Что такое редуктор

Редуктор (reducer) — это чистая функция, которая вычисляет следующее состояние дерева на основании его предыдущего состояния и применяемого действия.

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

Чего не должен делать редуктор

Редуктор — это всегда чистая функция, поэтому он не должен:

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

Симулятор редуктора

Упрощённо базовую структуру Redux можно представить так:

Состояние
Список действий
Редуктор для каждой части состояния
Редуктор для общего состояния

Хранилище

Хранилище (store) — это объект, который:

Хранилище в приложении всегда уникально. Так создаётся хранилище для приложения listManager:

Хранилище можно инициировать через серверные данные:

Функции хранилища

Прослушивание изменений состояния:

Поток данных

Поток данных в Redux всегда однонаправлен.

Передача действий с потоками данных происходит через вызов метода dispatch() в хранилище. Само хранилище передаёт действия редуктору и генерирует следующее состояние, а затем обновляет состояние и уведомляет об этом всех слушателей.

Советуем начинающим в Redux прочитать нашу статью о других способах передачи данных.

Источник

Начало работы с Redux: почему Redux?

Russian (Pусский) translation by Liliya (you can also view the original English article)

Когда вы изучаете React, вы почти всегда будете слышать, как люди говорят, насколько велик Redux, и что вы должны его попробовать. Экосистема React растет быстрыми темпами, и существует так много библиотек, которые вы можете подключить с помощью React, таких как flow, redux, middlewares, mobx и т. д.

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

Основная терминология Non-Redux

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

Чистая функция

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

Чистые функции дают прогнозируемый результат и детерминированы. Функция становится смешанной, когда она выполняет что-либо иное, кроме вычисления возвращаемого значения.

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

Наблюдаемые побочные эффекты

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

Контейнерные и презентационные компоненты

Разделение архитектуры компонента на два полезно при работе с приложениями React. Вы можете классифицировать их по двум категориям: компоненты контейнера и презентационные компоненты. Они также широко известны как умные и немые компоненты.

Контейнерный компонент связан с тем, как все работает, в то время как компоненты представления касаются того, как выглядят вещи. Чтобы лучше понять концепции, я рассмотрел это в другом учебнике: «Контейнер против презентационных компонентов в реактиве».

Отменяемые и неизменяемые объекты

Изменчивый объект можно определить следующим образом:

Почему Redux?

Официальная страница определяет Redux следующим образом:

Redux является предсказуемым контейнером состояний для приложений JavaScript.

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

redux что это javascript. Смотреть фото redux что это javascript. Смотреть картинку redux что это javascript. Картинка про redux что это javascript. Фото redux что это javascriptredux что это javascript. Смотреть фото redux что это javascript. Смотреть картинку redux что это javascript. Картинка про redux что это javascript. Фото redux что это javascript redux что это javascript. Смотреть фото redux что это javascript. Смотреть картинку redux что это javascript. Картинка про redux что это javascript. Фото redux что это javascript

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

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

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

redux что это javascript. Смотреть фото redux что это javascript. Смотреть картинку redux что это javascript. Картинка про redux что это javascript. Фото redux что это javascriptredux что это javascript. Смотреть фото redux что это javascript. Смотреть картинку redux что это javascript. Картинка про redux что это javascript. Фото redux что это javascript redux что это javascript. Смотреть фото redux что это javascript. Смотреть картинку redux что это javascript. Картинка про redux что это javascript. Фото redux что это javascriptИерархия компонентов базового приложения

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

redux что это javascript. Смотреть фото redux что это javascript. Смотреть картинку redux что это javascript. Картинка про redux что это javascript. Фото redux что это javascriptredux что это javascript. Смотреть фото redux что это javascript. Смотреть картинку redux что это javascript. Картинка про redux что это javascript. Фото redux что это javascript redux что это javascript. Смотреть фото redux что это javascript. Смотреть картинку redux что это javascript. Картинка про redux что это javascript. Фото redux что это javascriptЭскиз приложения среднего размера

Почему вы должны использовать Redux?

Вот с чем вы можете встретиться работая с React.

Это то, что я лично испытал с React, и многие другие разработчики согласятся. React- это библиотека представлений, и дело не в React чтобы управлять состоянием. Мы ищем принцип разделения идей.

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

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

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

Redux Архитектура

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

redux что это javascript. Смотреть фото redux что это javascript. Смотреть картинку redux что это javascript. Картинка про redux что это javascript. Фото redux что это javascriptredux что это javascript. Смотреть фото redux что это javascript. Смотреть картинку redux что это javascript. Картинка про redux что это javascript. Фото redux что это javascript redux что это javascript. Смотреть фото redux что это javascript. Смотреть картинку redux что это javascript. Картинка про redux что это javascript. Фото redux что это javascriptЧто такое Redux в двух словах

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

Для настройки сервера разработки используйте приложение create-react-app или вашу любимую конфигурацию webpack. Поскольку Redux является независимым государственным управлением, мы еще не собираемся подключаться к React. Поэтому удалите содержимое index.js, и мы будем играть с Redux для остальной части этого урока.

Хранилище

В хранилище находится один большой объект JavaScript, который содержит несколько пар ключ-значение, которые представляют текущее состояние приложения. В отличие от объекта State в React, который разбрызгивается через разные компоненты, у нас есть только один магазин. Хранилище обеспечивает состояние приложения, и каждый раз, когда состояние обновляется, просмотр rerenders.

Однако вы никогда не сможете изменить или изменить хранилище. Вместо этого вы создаете новые версии хранилища.

Из-за этого вы можете путешествовать во времени во всех штатах с момента загрузки приложения в свой браузер.

В хранилище есть три способа связи с остальной архитектурой. Вот они:

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

src/index.js

Теперь мы будем слышать любые изменения в хранилище, а затем console.log() текущее состояние хранилища.

Итак, как мы обновляем хранилище? В Redux есть что-то, называемое действиями, которые делают это возможным.

Создатели Action / Action

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

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

Например, в приведенном выше примере свойство type установлено в «INCREMENT», а также добавлено дополнительное свойство полезной нагрузки. Вы можете переименовать свойство полезной нагрузки в нечто более значимое или, в нашем случае, опустить его полностью. Вы можете отправить действие в хранилище, как это.

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

Итак, чтобы обновить состояние счетчика, вам нужно будет отправить действие incrementCount следующим образом:

Если вы направляетесь в консоль браузера, вы увидите, что он работает, частично. Мы получаем неопределенность, потому что мы еще не определили редуктор.

redux что это javascript. Смотреть фото redux что это javascript. Смотреть картинку redux что это javascript. Картинка про redux что это javascript. Фото redux что это javascriptredux что это javascript. Смотреть фото redux что это javascript. Смотреть картинку redux что это javascript. Картинка про redux что это javascript. Фото redux что это javascript redux что это javascript. Смотреть фото redux что это javascript. Смотреть картинку redux что это javascript. Картинка про redux что это javascript. Фото redux что это javascript

Итак, теперь мы рассмотрели действия и магазин. Однако нам нужен механизм для преобразования информации, предоставляемой действием, и преобразования состояния хранилища. Редукторы служат для этой цели.

Переходники

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

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

Это означает, что редуктор должен быть чистой функцией. Учитывая набор входов, он всегда должен возвращать тот же результат. Помимо этого, он не должен делать ничего больше. Кроме того, редуктор не является местом для побочных эффектов, таких как вызов AJAX или выборка данных из API.

Давайте заполним редуктор для нашего счетчика.

Вот создатель действия.

Наконец, отправьте его в хранилище.

Подведем итоги

Этот учебник должен был стать отправной точкой для управления состоянием с помощью Redux. Мы рассмотрели все необходимое, чтобы понять основные концепции Redux, такие как хранилище, действия и редукторы. К концу обучения мы также создали рабочий демонстрационный demo счетчик. Хотя это было не так уж много информации, но мы узнали, как все части головоломки подходят друг другу.

За последние пару лет React стал популярным. Фактически, у нас есть ряд предметов на рынке, доступных для покупки, просмотра, реализации и т. д. Если вы ищете дополнительные ресурсы вокруг React, не стесняйтесь их проверять.

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

Источник

Введение в React и Redux для бекенд-разработчиков

redux что это javascript. Смотреть фото redux что это javascript. Смотреть картинку redux что это javascript. Картинка про redux что это javascript. Фото redux что это javascript

Если вы как я долгое время считали, что JavaScript – это такой «игрушечный» язык на котором пишут анимашки для менюшек и падающие снежинки на форумах под новый год, а потом очнулись в 2016 году с мыслями WTF: react, flux redux, webpack, babel,… не отчаивайтесь. Вы не одиноки. Материалов по современному фронтенду в сети много, даже слишком много. Под катом еще одно альтернативное мнение о том, каково это учить JavaScript в 2016 году.

Итак, нам потребуются: React, React Dev Tools, React-Hot-Loader, React-Router, Thunk, Redux, Redux Dev Tools, Semantic-UI, Webpack, Babel и npm.

На первый взгляд много. Сравним с бекендом: MVC-фреймворк, ORM, Data Mapper, IOC-контейнер, логер, профайлер, очереди, управление конфигурациями, сборка и выкладка… Список можно продолжить, но думаю идея понятна и так: с ростом сложности решаемых задач растет и сложность инструментов. Все чаще мы употребляем термин Web App вместо Web Site, акцентируя внимание на богатых возможностях современных веб-приложений.

Почему именно этот стек?

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

React + Redux VS Angular VS Yet Another JS Framework

Только ленивый не сравнил Angular с React’ом (приписав при этом, дескать, сравнение не корректно, Angular – фреймворк, React – библиотека). Пойдем от обратного. Почему бы не выбрать что-нибудь эдакое, типа Vue, Ember или, упаси боже, Elm?

Если вам нравится TypeScript, ничто не мешает использовать его вместе с React. Просто конкретно мне он пока не дал критического объема преимуществ, чтобы заставить тратить время на еще один элемент в стеке.

Да, Redux можно использовать и с Angular, он никак не привязан к React, но для React уже есть react-redux и react-hot-loader. Наверное, для Angular тоже есть, но мейнтейнер Redux’а явно на стороне React.

Для React и Redux доступно два расширения Chrome. Рекомендую поставить оба, чтобы сделать отладку приятной.

Есть еще всякие ништяки, вроде React Native, но я им не пользовался, поэтому поделиться на эту тему мне, к сожалению, нечем.

А flux и все эти модные словечки. Как это работает?

Пакет react-redux осуществляет односторонний байндинг redux state => react component с помощью метода connect. При изменении состояния Redux сам перерисует необходимые компоненты, передав в props dispatch и часть общего state, хранимого в Redux. Какую часть состояния и какие функции на основании store.dispatch передавать — решать вам. Я рекомендую передать все обработчики событий компонента и не «светить» dispatch в компонентах.

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

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

JSX – это не JavaScript. Да, React можно писать без JSX, но проще тогда без React’а. Вообще ситуация с HTML-шаблонами напоминает мне засилье шаблонизаторов для PHP лет десять назад. Самым монструозным из всех был конечно Smarty. Мне казалось, что люди сошли с ума. Как иначе можно было объяснить желание написать шаблонизатор… для шаблонизатора?

Функциональная запись короче и лучше читается. Но я рекомендую не увлекаться экономией строк и вместо:
использовать чуть менее лаконичное, но более безопасное:

Во-первых, если вы не передадите параметры, то React недвусмысленно намекнет в консоли, что вы не правы. Во-вторых, WebStorm умеет анализировать PropTypes и при авто-дополнении заботливо вставит все required props.

Babel

Если вы не поняли на каком языке примеры кода выше, не расстраивайтесь. Это не JavaScript, ну не совсем JavaScript. Это ES6 + JSX. С JSX мы разобрались в параграфе выше – это просто синтаксический сахар для шаблонизации (почти как в PHP или @Model.Param в Razor).

С ES6 ситуация чуть сложнее и запутаннее. Если коротко:

Стоит отметить, что ES6 – это не истина в последней инстанции. Некоторые фичи до сих пор являются экспериментальными (например, генераторы) и для их использования потребуются полифиллы (библиотеки, реализующие экспериментальные фичи стандарта). Частично из-за этого мы решили отказаться от redux-saga в пользу redux-thunk, хотя и идея диспатчить функции до сих пор не кажется мне изящной (она просто работает).

Webpack

Так, то есть пишем мы на ES6 + JSX, а в бразуере выполняется минифицированный JS. Все это напоминает историю изобретения высокоуровневых ЯП. Люди могли писать более эффективные программы на ассемблере, но предпочли удобство и продуктивность. Раз есть исходники и компилятор (транспилятор в нашем случае), то потребуется и система сборки. Если в вашей пещере было достаточно тепло и уютно, возможно, названия grunt и gulp вам ничего не говорят. Что к лучшему. На данный момент, можно считать (слава богу), что для JS есть только один сборщик – Webpack — оставивший конкурентов позади. Можно считать, что webpack — аналог maven или msbuild (кому что ближе) в мире фронтэнда. Не смотря на то что, конфиги webpack’а на первый взгляд напоминают некромантские свитки, через какое-то время привыкаешь. Наверное, каждый любитель фронтенда должен хотя-бы раз в своей жизни написать tutorial по настройке webpack, также как каждый фанат ФП – tutorial по монадам.

Вообще Webpack собирает не только JS, но еще и sass, svg, шрифты и вообще все что душе угодно, но я пока еще не готов написать полноценный туториал, так что поищите на просторах интернета.

Без этих строк npm run build и npm start не заработают.

React-Hot-Loader

React-Router и Thunk

Основная ниша React’а в Web – это конечно SPA-сайты. А какой SPA-сайт без навигации и общения с сервером. Первую задачу решает react-router. Здесь альтернатив нет. Из неприятных сюрпризов:

Semantic-UI

Раз мы заговорили про SPA-приложения, то кроме навигации и запросов к серверу нужны еще компоненты, которые будут ту самую серверную информацию отображать. Для React есть обвязки Bootstrap, Material UI, Syncfusion Web Essentials (хотя эти обвязки не честные – там внутри jQuery). Наш выбор остановился на Sematic-UI. Решение удалось принять очень быстро – сначала отмели платные компоненты. Material UI не стали использовать из-за обилия анимации (сложнее модифицировать). Остались Bootstrap и Semantic. На Бутстрапе уже пол интернета сделано и в целом, Семантик показался более визуально-привлекательным. В общем, остановились на нем. Сразу оговорюсь, что использование Semantic UI – строго опционально, потому что минифицированная версия весит около 500кб.

Так что разрабатывать фронтенд в 2016 году вполне себе комфортно. Да инструментов много, многие библиотеки не совместимы, новые версии выходят очень часто. Это разумная плата за гигантский скачок в качестве фронтенд-стека.

Источник

Redux-in-russian

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

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

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

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

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

redux что это javascript. Смотреть фото redux что это javascript. Смотреть картинку redux что это javascript. Картинка про redux что это javascript. Фото redux что это javascript redux что это javascript. Смотреть фото redux что это javascript. Смотреть картинку redux что это javascript. Картинка про redux что это javascript. Фото redux что это javascript redux что это javascript. Смотреть фото redux что это javascript. Смотреть картинку redux что это javascript. Картинка про redux что это javascript. Фото redux что это javascript redux что это javascript. Смотреть фото redux что это javascript. Смотреть картинку redux что это javascript. Картинка про redux что это javascript. Фото redux что это javascript redux что это javascript. Смотреть фото redux что это javascript. Смотреть картинку redux что это javascript. Картинка про redux что это javascript. Фото redux что это javascript

Изучите Redux

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

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

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

Средний уровень

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

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

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

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

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

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

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

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

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

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

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

Влияния

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

Установка

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

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

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

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

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

Обратите внимание, что в отличие от самого Redux, многие пакеты в экосистеме Redux не предоставляют сборки UMD, поэтому мы рекомендуем использовать сборщики модулей CommonJS, такие как [Webpack] (https://webpack.js.org/) и [Browserify] (http://browserify.org/) для наиболее комфортной разработки.

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

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

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

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

Изучайте Redux вместе с его авторами

Видео уроки Redux от Dan Abramov

Getting Started with Redux

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

Посмотрите 30 бесплатных уроков «Getting Started with Redux»!

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

Смотрите бесплатный видео курс «Idiomatic Redux»

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

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

Воркшопы Redux

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

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

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

Примеры

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

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

Отзывы

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

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

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

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

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

Меценаты

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

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *