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

Содержание

Что такое Redux простыми словами? — Хабр Q&A

Чтобы понять как работает Redux тебе нужно норм вкуривать React.
Хотя бы для того, чтобы не пугаться props.

Есть у тебя React. Это все просто JS объекты.
<Component /> — так позволяет писать движок jsx, который и React его использует.
Так как структура компонентная, ты должен думать как обновить компоненты в в другой части страницы.

Принцип такой: компонент обычно обновляется при получении новых свойств — props или когда меняется его объект состояния — state.

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

Что делает Redux:
Он не призывает отказываться от state.

Но есть общий контейнер данных. И когда данные меняются — меняются и компоненты, которые отображают именно эти данные.

Когда нужно что-то поменять — вызываешь dispatch — специальная функция reducer реагирует на это — и меняет данные как тебе нужно. Когда данные заменятся — компонент Propvider — вызывает рендер у своего дочернего компонента (тот что оборачивает Provider).
Например:

<Provider>
   <MyComponent />//Вот сюда Provider пробросит (запишет) новые props.
</Provider>

Записывает он это самое глобальное хранилище и все компоненты, для которых поменялись данные — перерисуются.

mapStateToProps — указывает какую часть этого глобального хранилища будет предоставлять provider.
Если у тебя оно такое:

{
   chunkStore: {},
   some: {}
}

То если mapStateToProps вернет{store: store.chunkStore}то Provider в props своего потомка пробросит такое: store: store.chunkStore. И ты будешь обращаться внутри к store, но там будет только часть chunkStore (не весь объект, а его поле).

mapDispatchToProps — т.к. subscribe нет, то это возвращает функции, которые могут внутри себя вызывать dispatch().

action — описывает то что и на что ты хочешь поменять. Какое поле и какие данные туда поместить.

Как работает Redux?. Недавно во время интервью мне задали… | by Ivan Eroshkin

Перевод статьи André Santiago: How Does Redux Work?

Недавно во время интервью мне задали вопрос о том, как Redux взаимодействует с To Do приложением. Мне нужно было рассказать интервьюеру, что происходит в момент, когда заполнено поле ввода и нажата кнопка отправки. Это было весьма затруднительно, так как компьютера не было под рукой. На самом деле, все, что у меня было — это ручка, которую он мне предложил, и оборотная сторона моего резюме, чтобы писать.

Сидя с ручкой в руке, я обдумывал это.

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

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

Всегда продолжай учиться.

Во-первых, что такое Redux?

Как описано в документации Redux:

Redux — это контейнер предсказуемых состояний для JavaScript приложений. (Не путать с платформой WordPress — Redux Framework.)
Он помогает вам писать приложения, которые ведут себя последовательно, работают в разных средах (клиентских, серверных и нативных), и которые легко тестировать. Кроме того, он предоставляет отличные возможности для разработчиков, такие как редактирование кода в сочетании с временным отладчиком кода.
Вы можете использовать Redux вместе с React или с любой другой библиотекой для View. Redux крайне мал (2 КБ, включая зависимости).

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

Redux возник из идеи Flux — архитектурного паттерна, созданного инженерами из Facebook.

Что делает Redux особенным?

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

Это сильно упрощает масштабируемость и позволяет быстро диагностировать узкие места, асинхронные проблемы или ошибки.

Как это работает?

Основные понятия Redux — Store, Actions, Reducers и Subscriptions.

Initial state

Начальное состояние — это то, как оно выглядит в начале.

Подумайте о полках продуктового магазина. Здесь есть консервы, фрукты, хлеб, молоко и «bodega cat».

Redux — Начальное состояние (Initial state)

Actions/Dispatches

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

Каждый раз, когда происходит действие(action), оно называется отправкой(dispatch).

Redux — Действия (Actions)

Reducers

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

Для этого необходимы редюсеры(Reducers)

Редюсеры принимают аргументы: состояние, установленное как начальное состояние по умолчанию(Initial state), и действие(Action). Это действие помогает редюсеру определить, что необходимо сделать с состоянием.

Redux — Редюсеры(Reducer)

Store

У нас есть список действий(Actions) и наш редюсер(Reducers), который может обрабатывать наши действия. Другими словами, теперь мы можем полностью взаимодействовать с магазином, когда окажемся внутри него. Однако, нам нужен последний шаг — Хранилище(Store). Это место, где содержится состояние. Для того чтобы создать его, вам нужен редюсер и начальное состояние.

Redux — Хранилище(Store)

Вы можете взаимодействовать с объектами хранилища, используя store. getState(). Давайте сделаем это, проходя через каждое действие(action/dispatch):

Redux — использование store.getState()

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

Redux — Подписка на хранилище(Subscriptions)

Как показано выше, первый console.log с нейтральным настроением «bodega cat» будет возвращаться пока у PET_BODEGA_CAT происходит отправка этого действия.

Итак, теперь, когда у нас есть общее представление о том, как работает Redux , действия(Actions) отправляются на редюсеры(Reducers), которые изменяют начальное состояние(Initial state) внутри хранилища(Store), мы можем применить их к To Do приложению.

Initial state

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

Redux — Начальное состояние(Initial State)

Actions/Dispatches

Далее нам нужно отправить действие(Action) на редюсер(Reducer). Это немного отличается от того, что мы делали выше, потому что на этот раз мы принимаем динамическое значение. Другими словами, мы получаем значение из поля ввода, которое отправляется в форме в наш список. В этом случае наше действие должно быть в состоянии принять аргумент:

Redux —Действия / Отправка( Action/Dispatch)

Reducers

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

Redux — Reducer — Handles an Action that’s Dispatched and Alters the State

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

To Do приложение вместе с Redux

Поле ввода заполнено текстом «Купить еду»
Эти данные собираются при нажатии кнопки «Отправить»
Затем данные передаются в действие(Action), которое отправляется редюсеру(Reducer)
Редюсер(Reducer) читает действие(Action) и определяет что делать со значением
Редюсер(Reducer) добавляет его в массив toDos в начальное состояние(Initial state)
Затем возвращается состояние

Редакс в реальной жизни — доклад Ивана Акулова

Это – Дэн Абрамов. У него 27К подписчиков (это круто). И в прошлом году он сделал редакс.
Редакс – это библиотека для организации архитектуры приложения.
Главные отличия редакса от остальных подходов — это то, что 1) всё состояние приложения хранится в единственном месте…
и 2) приложение строится по однонаправленному потоку данных (http://redux.js.org/docs/basics/DataFlow.html).
Однонаправленный поток кардинально отличается от MVC, где C—V и C—M обычно двунаправленные. Однонаправленный поток упрощает понимание приложения.
Как я уже сказал, всё состояние приложения хранится в единственном месте. Это место называется «стор». Например, у такого приложения, которое показывает цифру,..
…стор может быть таким.
Второй принцип — состояние приложения нельзя изменять напрямую.
Состояние нельзя изменять напрямую. То есть вот так: store.number += 1 — делать нельзя. Чтобы изменить стор, нужно сгенерировать событие с описанием изменения. Это делается с помощью store.dispatch().
Объект, который передаётся в dispatch(), называется «экшен» (action). Это обычный JavaScript-объект. Он может содержать любые поля, которые будут описывать изменение, единственное обязательное поле — type.
Редакс запрещает напрямую изменять состояние, потому что нужно следить за изменениями, чтобы при изменениях стора обновлять представление.
Третий принцип — все изменения обрабатываются функцией, которая называется «редьюсер» и которая должна быть чистой.
Ещё раз: экшен — это событие, которое генерируется функцией dispatch().
Чистая функция — это функция, которая всегда для одного и того же входного значения возвращает одинаковый результат + не изменяет ничего снаружи себя.
Синус — чистая функция, потому что для одного и того же угла она всегда возвращает одно и то же значение.
parseInt() — чистая.
$.ajax() — не чистая, потому что в разные моменты времени она может вернуть разные значения.
Первая функция — чистая, потому что она ничего не изменяет снаружи.
Вторая — нет, потому что она изменяет свой параметр, и внешний код после вызова этой функции работает уже с другим параметром.
Третья — нет, потому что она тоже изменяет состояние системы снаружи себя (выводит что-то в консоль).
Эта функция, которая обрабатывает экшены, называется редьюсером.
Она обрабатывает каждый экшен, который происходит в приложении. Функция принимает на вход есть текущее состояние приложения и экшен, который только что произошёл, и для каждого типа экшена изменяет состояние таким образом, как считает нужным. Обратите внимание, что состояние здесь не изменяется напрямую. Вместо этого возвращается новое состояние, которым Редакс уже сам заменяет старое.
Итак, это главные принципы редакса…
(Список принципов: http://redux.js.org/docs/introduction/ThreePrinciples.html)
…и согласно ним редакс-приложение строится по такой схеме.
Вопрос: что делать с сайд-эффектами?
Сайд-эффекты — это когда вы изменяете глобальную переменную, делаете запрос на сервер, пишете что-то в лог.
Проблема в том, что в этой схеме сайд-эффектам нет места. Единственное место, где происходят изменения — это редьюсер, а он обязан быть чистой функцией.
На помощь приходит middleware. Мидлвейр находится между кодом, который диспатчит экшены (то есть генерирует события) и редьюсером (то есть функцией, которая их преобразует в новое состояние), пропускает через себя все возникающие экшены, меняет их (если считает нужным) и отправляет дальше — или не отправляет. Особенность мидлвейра в том, что он быть чистой функцией не обязан — и поэтому он может делать сайд-эффекты вроде запросов на сервер или чего угодно.
На самом деле мидлвейров может быть много, и тогда они организуются по цепочке.
Фактически, мидлвейр — это просто функция, которая принимает текущий стор, следующий в цепочке мидлвейр и текущий экшен и что-то делает с ним.
Мидлвейры подключаются при создании стора. createStore и applyMiddleware — это методы редакса.
Я не буду рассказывать, как писать свой мидлвейр, потому что создавать свой миддлвейр для работы с сайд-эффектами — слишком сложно. Вместо этого мы посмотрим на те решения, которые уже есть. К слову, мидлвейры создаются сообществом и не входят в поставку редакса.
Есть куча методов организации сайд-эффектов. Я знаю два. Первый — это redux-thunk, с которым вы, создавая приложение с редаксом, столкнётесь точно.
Зачем он нужен? Классический редакс умеет работать только с экшенами, которые представлены простыми объектами.
Применяя мидлвейр redux-thunk вот таким вот образом,..
…вы получаете возможность вместо простых обьектов…
…диспатчить функции. Когда вы задиспатчите функцию, redux-thunk вызовет её и передаст в неё метод dispatch стора, который вы потом сможете вызвать тогда, когда вам нужно. Такие функции называются thunk-ами.
Или вот так, если вынести создание экшена в отдельную функцию. Такое вынесение, кстати, — стандартный шаблон в Редаксе, и функция, создающая экшен, называется экшен-криэйтор.
Что ещё можно делать с redux-thunk? Можно диспатчить несколько экшенов подряд, чтобы выполнить логаут и затем очистить стор.
Можно диспатчить экшены по таймеру, чтобы побесить пользователя всплывающими модальными окнами. Можно делать что угодно, потому что у нас есть dispatch — и даже есть текущее состояние стора, которое передаётся вторым параметром.
Redux-thunk удобен для простых сайд-эффектов. Когда нужно организовать сложный поток сайд-эффектов, он становится неудобен. В этом случае пригождается redux-saga.
Что такое redux-saga? Вообще, сага — это подход, пришедший с бекенда.
Redux-saga — это альтернативный подход к организации сайд-эффектов. Вместо того, чтобы диспатчить функции, которые обрабатываются redux-thunk-ом, вы создаёте сагу, которая собирает всю логику обработки внутрь себя. В отличие от thunk-ов, которые выполняются, когда вы их диспатчите, саги запускаются при старте приложения и как бы «работают в фоне». Саги слушают все экшены, которые диспатчит стор, и решают, что делать с ними.
И у саг в редаксе два преимущества по сравнению с thunk-ами:
— Они позволяют организовывать сложные последовательности сайд-эффектов
— И они очень легко тестируются
Давайте посмотрим, как выглядит сага.
Помните старый пример логина с помощью thunk-а? Давайте поменяем его на сагу.
Что меняется?
— Функция становится генератором
— Прямые вызовы заменяются на непрямые, через call(); dispatch() заменяется на put()
— Стиль вызовов меняется на синхронный (без колбеков) — и именно вот это позволяет писать сложные асинхронные запросы
На экшены можно подписываться двумя способами. Первый — простой: мы оборачиваем сагу и просим redux-saga вызывать её каждый раз, когда произойдёт экшен LOGIN_REQUESTED.
Второй способ более сложный. Мы помещаем код саги в бесконечный цикл и размещаем в начале yield take('LOGIN_REQUESTED'). Когда сага начнёт выполняться, выполнение дойдёт до этой строки, остановится и не продолжится до тех пор, пока не сгенерируется экшен LOGIN_REQUESTED.
Второй способ позволяет ловить несколько экшенов. Здесь код на месте многоточия выполнится только тогда, когда произойдёт ANOTHER_ACTION, которому предшествовал LOGIN_REQUESTED.
Так саги устанавливаются. Они запускаются сразу после вызова createStore().
Примеры кода с сагами
Бизнес-логика
С бизнес-логикой всё просто.
Бизнес-логику — мидлвейрам!
Почему?
— Сайд-эффекты, которым принадлежит большая часть бизнес-логики (thunk-ах или сагах), и так будут в мидлвейрах. Есть смысл перенести оставшуюся бизнеслогику туда
— Мидлвейры имеют доступ ко всему стору, а редьюсеры — только к части
— Можно диспатчить несколько экшенов
Ещё ссылки:
Question: Where to put business logic / validations?
Recommendations for best practices regarding action-creators, reducers, and selectors
То есть на этой схеме бизнес-логика должна находиться в этом чёрном блоке.
Пример кода из одного из лучших open-source проектов на редаксе. Редьюсеры в нём максимально простые, …
…а экшен-криэйторы сложные и содержат всю логику.
Тестирование
Что вообще можно тестировать в Редаксе? Обычные экшен-крийэторы тестировать просто. Асинхронные — сложно, потому что они возвращают функции, а проверить, что вернулась правильная функция, сложно. Редьюсеры — просто.
(Как тестировать: экшен-криэйторы, асинхронные экшен-криэйторы, редьюсеры.)
Я расскажу про то, как тестировать саги. Саги тестировать очень просто.
Помните этот слайд?
Самый кайф — вот в этих выделенных функциях.
call($.ajax) не вызывает $.ajax напрямую, а генерирует декларативное описание вызова в виде простого JS-объекта. Благодаря этому для тестирования достаточно сравнить два объекта через deepEqual.
Вот такую вот сагу…
…протестировать очень просто.
Обратите внимание, что для того, чтобы сэмулировать ответ сервера, мы просто передаём его в генератор.
И проверить то, что генератор вызывает $.ajax и делает этим запрос на сервер, очень просто, потому что генератор возвращает объект с описанием вызова.
То есть ещё раз: мы декларируем вызов AJAX-запроса…
…и просто сравниваем декларацию.
Точно так же и с генерацией экшенов. Если мы хотим проверить, что сага сгенерирует экшен LOGIN_SUCCESS, мы просто сравниваем ту декларацию, которую вернул генератор, с ожидаемой.
Что ещё не поместилось в доклад
Ducks
redux-devtools
redux-devtools-extension
Reselect
Документация
andrewngu/sound-redux
Hashnode/mern-starter
Будьте умничками.
Спасибо!
twitter.com/iamakulov

Введение в Redux

1- Что такое Redux?

В 2013 году, Facebook сказал, что AngularJS у Google медленный и тяжелый, поэтому в этом году они представили ReactJS сообществу программистов. Но ReactJS является только бибилиотекой для создания Component и отображения данных Component на интерфейсе, ReactJS не может управлять состоянием приложения. Недолго после этого, Facebook представил библиотеку Javascript с названием Flux который помогает управлять состоянием приложения, и является библиотекой созданной для поддержки React.

В то время, Dan Abramov изучал Flux у Facebook и язык ELM. На него оказало влияние архитектура ELM, и он видел сложность у Flux. В 5/2015 Dan Abramov объявил новую библиотеку с названием Redux, она основана на архитектуре ELM и устраняет сложность Flux.

ELM
ELM является функциональным языком программирования (Functional Programming Language), с большим влиянием от Haskell, и был напрямую компилирован в JavaScript. Помимо схожести с Haskell, самая ярковыраженная часть у ELM это его архитектура (ELM Architecture), данная архитектура помогает развить веб приложения на языках вида FPL (Functional Programming Language) более простым способом.

После появления, Redux вызвала бурную реакцию и моментально привлекла внимание сообщества React и даже Facebook предложил Dan Abramov работу. Теперь и Redux и Flux существуют параллельно, но Redux более популярен и ширико используется.

Flux vs Redux:

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

2- Архитектура Flux

Архитектура Flux была впервые представлена Bill Fisher и Jing Chen на конференции Facebook F8 в 2014 году. Данная идея переопределила модель MVVM (Model View — View Model) который был ширико использован до этого с понятием «однонаправленный поток данных» (unidirectional data flow).

Действия (actions) и события (events) в Flux пройдут через «скрытую схему» следующего вида:

USER INTERFACE — action —> DISPATCHER — action —> STORES — notify changes —> USER INTERFACE

Ниже является изображение общей архитектуры FLUX:

Когда пользователь выполняет действие на интерфейсе (Например нажимает на кнопку мыши). Создается объект Action, это обычный объект хранящий такую информацию как: вид действия, место происхождения, время, коорддинаты (для событий мыши), в какое состояние (state) меняется,. .

// Action object example:
{
  type: 'ADD_TODO',
  payload: {
    title: 'Do something.',
    priority: 'HIGH',
    completed: false
  }
}

Части в архитектуре FLUX:

VIEW: это иерархическая композиция (hierarchical composition) у React Component.

ACTION: это чистый объект созданный для хранения информации связанной с событием пользователя (Нажатие кнопки мыши на интерфейсе,..), он включает информацию как: вид действия, место происхождения, время, коорддинаты, в какое состояние (state) меняется,..

DISPATCHER: Единственная точка в данном приложении для получения объектов Action нуждающиеся в обработке.

STORE: Store прислушивается к Action, управляет данными и состоянием приложения. Store основываются на объекты action для ответа соответствующим USER INTERFACE.

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

Redux изучил архитектуру Flux, но отбросил ненужные сложности.

Redux не имеет понятие DISPATCHER.
Redux имеет едиственный STORE вместо разных STORE как у Flux.
Объекты Action будут приняты и обработаны напрямую с помощью STORE.

Ниже является изображение архитектуры REDUX:

Части архитектуры REDUX:

VIEW PROVIDER: Представляет View Framework для регистрации с STORE. При этом, View Framework может быть React или Angular,…

STORE: Управляет состоянием приложения и имеет функцию dispatch(action).

MIDDLEWARE: (Промежуточное программное обеспечение) Предоставляет способ взаимодействия с объектами Action отправленные к STORE перед тем, как они отправляются к REDUCER. В Middleware вы можете выполнить такие задания как запись журналов, оповещение ошибок, создание «асинхронизированных запросов» (asynchronous requests), или отправка (dispatch) новых action,…

REDUCER: (Редуктор) Это чистая функцая возвращающая новое состояние с начального состояния. Примечание: REDUCER не меняет состояние приложения, вместо этого он создает копию начального состояния и меняет его, чтобы получить новое состояние.

Когда, зачем и почему может быть полезным Redux / WAYUP

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

Некоторые его любят, некоторые – уже не сильно, но сколько мастеров – столько и мнений. Управлять огромным потоком данных и их связями действительно было сложновато до появления фреймворка Redux. Но вдохновленный набором шаблонов программирования Flux Facebook, Redux предназначен для управления состоянием данных в приложениях JavaScript. Хотя он в основном используется с библиотекой React, многие веб-разработчики с успехом применяют его с иными фреймворками и библиотеками, такими как jQuery, Angular или Vue.

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

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

Когда и зачем нужен Redux

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

Не поймите превратно, React велик и могуч и вполне можно в проекте обойтись только одним этим фреймворком и более ничего не использовать. Тем более, что мы уже рассматривали подробно React и приводили примеры веб-проектов, что использовали только эту библиотеку для создания функционала интерфейса (то же самое приложение, по сути). Но по мере того, как приложение становится более сложным, с большим количеством разных компонентов, использование всего лишь одного фреймворка для управления всем этим «массивом», объемом данных и так далее может стать очень проблематичным и осложненным действом. Проблем может появиться много, даже неудобств и излишней трудоёмкости.

И именно в этот момент Redux способен сэкономить время; он значительно уменьшает и упрощает сложности, возникающие в таких больших приложениях. Если у веб-разработчика есть опыт работы в React, он может великолепно понять, что поток данных React таков, что родительские компоненты передают props (входные параметры) дочерним компонентам. В огромном приложении с данными, что используются в разных компонентах, постоянно изменяемыми и сохраняемыми в хранилище, создающими множественные связи – рано или поздно сам код станет очень трудно читать и даже улучшать. Вам самим, в первую очередь.

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

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

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

Увидели? Это даже намного лучше, чем мы предполагали. Если бы наши компоненты взаимодействовали друг с другом, мы создали бы уязвимую и нечитаемую базу программного кода с множеством ошибок. Redux делает ситуацию другой, меняет её и совершенствует.

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

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

Предсказуемость результатов

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

Поддержание работоспособности

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

Простота тестирования

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

Здорово и все просто. Если приложение сложное – используем Redux и забываем обо всем прочем. Но так ли это в действительности? Что если существуют некоторые особенности, когда Redux все же нужен?

Когда Redux может не потребоваться

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

Вы и ваши друзья (или коллеги) уже получили заранее определенный способ совместного использования и организации состояния между компонентам. Иными словами, вам уже было сказано в каком фреймворке нужно доделать/переделать/создать.

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

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

Вам не нужно управлять событиями на стороне сервера (SSE) или группой веб-сайтов, что будут использовать одинаковые компоненты, но с изменяемым состоянием.

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

Нашли что-то свое, тогда с большой вероятностью Redux может не потребоваться. И неважно, какое приложение, какая работа сайта и какой проект. Все зависит от их сложности, масштабности. Но что касается самого Redux, то этот фреймворк при своем весе около 2 КБ имеет весьма непростые возможности.

Redux в частях и под лупой

Действия (actions)

Это просто события, созданные с помощью функций для отправки данных из приложения в хранилище. Данные могут быть отправлены различными способами, такими как отправка формы, вызов API или обычного взаимодействия с пользователем. Каждое действие в Redux имеет свойство type, которое описывает тип действия, а также «важную» информацию, отправляемую в хранилище. Давайте рассмотрим самый простой пример действия (actions.js) в работе, размещенного на GitHub.

Чтобы вызвать действие в любом месте приложения, Redux использует метод dispatch(), который отправляет действия в хранилище Redux, указывающие на изменение состояния (dispatch. js)

Редюсеры (Reducer)

Поскольку Redux не позволяет приложению вносить изменения в состояния компонентов, сохраняемых в хранилище, он использует dispatch() для этого. Функция dispatch() просто указывает на намерение изменить данное состояние, но на самом деле не меняет его … вот почему и нужны редюсеры (Reducer).

Редюсеры (Reducer) – это функции, которые считывают из хранилища текущее состояние приложения через отправленное действие, а затем возвращают новое состояние. Посмотрим на код ниже (handle-auth.js), который получает данные о текущем состоянии, а затем возвращает следующее состояние:

При создании более сложных приложений рекомендуется использовать метод combineReducers(). Этот метод объединяет все редюсеры в приложении в один список функций (index-reducer.js), где каждый из них обрабатывает свою часть состояния приложения, а параметр состояния отличается и является персональным для каждой функции.

Здесь также стоит отметить, что редюсеры должны быть написаны с чистыми функциями, особенности которых в том, что:

Они не делают внешних вызовов сети или базы данных.

Их возвращаемые значения зависят только от значений их параметров.

Их аргументы следует рассматривать как неизменяемые, то есть их не стоит менять вообще.

Хранилище

Хранилище похоже на сердце фреймворка Redux. Это единственный источник истины, в котором находятся все состояния приложения и который обеспечивает доступ к состоянию с помощью нескольких методов, действий отправки данных и регистрации записей. Любое отправленное действие возвращает новое состояние данных в хранилище с помощью редюсеров. И вот как выглядит код хранилища (create-store.js)

Функциональное программирование и Redux

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

Так что же это за принципы такие «функционального программирования»?

Могут использоваться «чистые», первого класса.

Могут использоваться вспомогательные функции (высшего порядка), такие как карта (map), фильтр (filter).

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

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

Порядок выполнения кода неважен

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

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

Завершение

Это правда. Redux является большой библиотекой по управлению состоянием приложения. И так же, правда и то, что свою популярность фреймворк заслужил. Но что особенно может быть интересным, что Redux успешно применяется в таких проектах, как WordPress, аналогично тому, как RedBox нашел применение в Uber и Twitter. И еще одна правда заключается в том, что Redux не слишком-то подходит для каждого конкретного приложения.

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

Впрочем, как и всегда, некоторые полагают Redux устаревшим для работы с данными. Но тут уж, кому и что ближе, а факты – они просто есть.

Что такое redux, если я использую базу данных для своего приложения react?

Поэтому недавно я начал внедрять базу данных в приложение react (как и любое реальное приложение). Мой вопрос в том, зачем нужен redux? Я имею в виду, что если у вас есть база данных, вы можете поместить информацию непосредственно в базу данных и восстановить ее оттуда. Вам не нужно сохранять его в состоянии. (Новый для react, redux. Это была только моя точка зрения)

javascript

database

reactjs

firebase

react-redux

Поделиться

Источник

Mrnd

16 января 2019 в 08:17

3 ответа

Разница между хранением данных в параметрах React-Navigation и непосредственным состоянием Redux
Допустим, у меня есть коллекция, состоящая из 3 объектов в моем Tab-Navigator из React-Navigation , которая интегрирована в Redux . Каждый из этих 3 экранов TN отображает список данных своего собственного уникального объекта. Я использую Redux для: fetchCollection из онлайн-базы данных при запуске…
Использование redux в React внутри фреймворка Aurelia
Я использую фреймворк Aurelia для своего клиентского приложения. Однако по определенной причине я использовал react для некоторых экранов. Реализация redux в клиентское приложение, мне показалось это очень сложным, поскольку redux уже используется в некоторых частях реагировать. Кто-нибудь знает,…

Инструменты управления базами данных и состояниями, такие как Redux, имеют разные проблемы (хотя они манипулируют одним и тем же: данными).

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

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

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

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

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

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

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

Поделиться

Saraband

16 января 2019 в 10:27

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

Поделиться

Prathmesh Kadam

16 января 2019 в 09:10

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

Поделиться

Nikita Malyschkin

16 января 2019 в 08:24

Главная страница — Русский перевод Redux Saga

Логотип Redux Saga

 

redux-saga — это библиотека, которая призвана упростить и улучшить побочные эффекты (т.е. такие действия, как асинхронные операции, например, загрузки данных, и «грязные» действия, такие, как доступ к браузерному кешу), сделать лёгкими в тестировании и лучше справляться с ошибками.

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

Библиотека использует концепцию ES6, под названием генераторы, для того, чтобы сделать эти асинхронные потоки легкими для чтения, написания и тестирования. (если вы не знакомы с этим, здесь есть некоторые ссылки для ознакомления) Тем самым, эти асинхронные потоки выглядят, как ваш стандартный синхронный JavaScript-код. (наподобие async/await, но генераторы имеют несколько отличных возможностей, необходимых нам)

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

$ npm install --save redux-saga

или

Альтернативно, вы можете использовать предоставленные UMD сборки напрямую в <script> на HTML странице. Смотрите эту секцию.

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

Предположим, что у нас есть интерфейс для извлечения некоторых пользовательских данных с удалённого сервера при нажатии кнопки. (Для краткости, мы просто покажем код запуска экшена.)

class UserComponent extends React.Component {
  ...
  onSomeButtonClicked() {
    const { userId, dispatch } = this.props
    dispatch({type: 'USER_FETCH_REQUESTED', payload: {userId}})
  }
  . ..
}

Компонент диспатчит действие в виде простого объекта в хранилище. Мы создадим saga, которая слушает все действия USER_FETCH_REQUESTED и генерирует вызовы API для извлечения пользовательских данных.

sagas.js

import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
import Api from '...'
function* fetchUser(action) {
   try {
      const user = yield call(Api.fetchUser, action.payload.userId);
      yield put({type: "USER_FETCH_SUCCEEDED", user: user});
   } catch (e) {
      yield put({type: "USER_FETCH_FAILED", message: e.message});
   }
}
function* mySaga() {
  yield takeEvery("USER_FETCH_REQUESTED", fetchUser);
}
function* mySaga() {
  yield takeLatest("USER_FETCH_REQUESTED", fetchUser);
}
export default mySaga;

Для запуска Saga, мы подключим ее к Redux Store, используя мидлвар redux-saga.

main.js

import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'
import reducer from './reducers'
import mySaga from './sagas'
const sagaMiddleware = createSagaMiddleware()
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
)
sagaMiddleware.run(mySaga)

Также существует сборка umd redux-saga, доступная в каталоге dist/. При использовании umd-сборки, redux-saga доступна как ReduxSaga в объекте window.

версия umd полезна, если вы не используете Webpack или Browserify. Вы можете получить доступ к ней, непосредственно из unpkg.

Доступны следующие сборки:

Важно! Если ваш целевой браузер не поддерживает генераторы ES2015, вам нужно транспилировать код (например, через babel plugin) и предоставить корректный runtime, такой, например, как этот. Runtime нужно импортировать до redux-saga:

import 'regenerator-runtime/runtime'
import sagaMiddleware from 'redux-saga'

$ git clone https://github.com/redux-saga/redux-saga.git

$ cd redux-saga

$ npm install

$ npm test

Ниже приведены примеры, портированные (пока) из репозиториев Redux.

Примеры счётчика

Есть три примера счётчика.

counter-vanilla

Демо, использующее обычный JavaScript и UMD-сборки. Все исходники находятся в index.html.

Для запуска примера, просто откройте index.html в браузере.

Важно: ваш браузер должен поддерживать генераторы. Подойдут последние версии Chrome/Firefox/Edge.

counter

Демо, использующее webpack и высокоуровневое API takeEvery.

$ npm run counter

$ npm run test-counter

cancellable-counter

Демо, использующее низкоуровневое API для демонстрации отмены задачи.

$ npm run cancellable-counter

пример с корзиной

$ npm run shop

$ npm run test-shop

$ npm run async

$ npm run test-async

реальный пример (с горячей перезагрузкой webpack)

Redux-Saga с TypeScript требует DOM. Iterable или ES2015.Iterable. Если ваш target это ES6, у вас, скорее всего, уже всё настроено, однако для ES5 вам потребуется самостоятельно добавить его. Посмотрите файл tsconfig.json и официальную документацию с опциями компилятора.

Вы можете найти официальный логотип Redux-Saga с различными вариантами в каталоге logo.

Поддержите нас ежемесячными пожертвованиями и помогите нам продолжать нашу деятельность. [Стать меценатом]

Стань спонсором и получи свой логотип в нашем README на GitHub с ссылкой на ваш сайт. [Стать спонсором]

A Designer’s Guide — Smashing Magazine

Знаете ли вы, что реальная сила Redux выходит за рамки управления государством? Вы хотите разрабатывать с учетом того, как работает Redux? Давайте углубимся в то, что Redux может делать, почему он делает свои вещи, каковы недостатки и как это связано с дизайном.

Вы слышали о Redux? Что это такое? Не гуглить, пожалуйста!

«Необычный бэкэнд».
«Я слышал об этом, но не знаю, что это такое. Возможно, это фреймворк React? »
«Лучший способ хранить и управлять состояниями в приложении React.”

Я задал этот вопрос более 40 дизайнерам. Выше приведены их типичные ответы. Многие из них знают, что Redux работает с React и его задача — «управление состоянием».

Но знаете ли вы, что на самом деле означает это «государственное управление»? Вы знаете, что реальная сила Redux выходит за рамки управления государством? Знаете ли вы, что Redux не обязательно требует React для работы ? Хотите ли вы присоединиться к обсуждению вашей команды (или хотя бы за обедом) о том, стоит ли использовать Redux? Вы хотите разрабатывать с учетом того, как работает Redux?

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

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

Готовы к поездке?

Что такое Redux?

На сверхвысоком уровне Redux — это инструмент, который разработчики используют, чтобы облегчить себе жизнь. Как многие из вас, возможно, слышали, его работа — «управление государством». Я объясню, что означает управление состоянием, несколькими разделами позже.На этом этапе я оставлю вас с этой картинкой:

Redux управляет состоянием, но в фоновом режиме есть несколько скрытых возможностей. (Иллюстрация Биби) (превью в большом разрешении)

Почему вам должно быть до этого дело?

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

Нет. Я думаю, мы должны принять это. Конструктор автомобилей должен понимать, для чего нужен двигатель, верно? Чтобы успешно разрабатывать интерфейсы приложений, дизайнеры также должны хорошо разбираться в деталях .Мы должны узнать, что он может делать, понять, почему разработчики его используют, а также знать о его преимуществах и последствиях.

«Дизайн — это не только то, как он выглядит и ощущается. Дизайн — это то, как это работает ».
— Стив Джобс

Что умеет Redux?

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

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

Управление состоянием

Если вы не уверены, что означает это «состояние», давайте заменим его более общим термином: «данные». Состояние — это данные, которые время от времени меняются . Состояние определяет, что отображается в пользовательском интерфейсе.

Что такое государственное управление? В общем, есть три аспекта данных, которыми нам нужно управлять в приложении:

Получение и сохранение данных
Назначение данных элементам пользовательского интерфейса
Изменение данных

Допустим, мы создаем страницу Dribbble shot .Какие данные мы хотим отображать на странице? Они включают в себя фото профиля автора, имя, анимированный GIF-файл, количество сердечек, комментарии и т. Д.

Данные на странице снимков Dribbble (большой превью)

Во-первых, нам нужно получить все эти данные с сервера в облаке и куда-нибудь их поместить. Далее нам нужно отобразить данные. Нам нужно назначить части этих данных соответствующим элементам пользовательского интерфейса, которые представляют то, что мы на самом деле видим в браузере. Например, мы назначаем URL-адрес фотографии профиля атрибуту src тега HTML img :

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

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

Получение и сохранение данных

В React мы разбиваем пользовательский интерфейс на компоненты.Каждый из этих компонентов можно разбить на более мелкие (см. «Что такое React?»).

Страница снимка Dribbble с разбивкой на компоненты (большой превью)

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

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

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

Наивный способ: получить данные от каждого компонента. (Иллюстрация Биби) (превью в большом разрешении)

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

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

Магазин также служит единственным источником истины. Компоненты всегда получают данные из магазина, а не откуда-либо еще. Это поддерживает согласованность всего содержимого пользовательского интерфейса.

Redux как центральное хранилище данных. (Иллюстрация Beebee) (превью в большом разрешении)

Назначение данных элементам пользовательского интерфейса

Только с React есть лучший способ извлечения и хранения данных.Мы можем попросить нашего очень любезного шеф-повара Шотвелла сделать покупки для всех его друзей-поваров. Он ездил на грузовике на фермы и возил вкусности. Мы могли бы получить данные из компонента-контейнера, например, компонента «Shot» в примере Dribbble, и использовать их как единственный источник истины.

Извлечь данные из корневого компонента. (Иллюстрация Beebee) (превью в большом разрешении)

Этот подход более эффективен, чем наивный способ получения данных из каждого компонента. Но как Шотвелл передает ингредиенты другим поварам? Как передать данные компонентам, которые фактически отображают элементы HTML? Мы передаем данные из внешних компонентов во внутренние компоненты, как эстафету в реле, на всем пути, пока данные не достигнут пункта назначения.

Например, URL аватара автора необходимо передать из «Shot» в «ShotDetail», в «Title» и, наконец, в тег . Если наши повара живут в квартире, это действительно выглядит так:

Передает данные компонентам через props. (Иллюстрация Beebee) (превью в большом разрешении)

Чтобы доставить данные к месту назначения, нам нужно задействовать все компоненты на пути, даже если они вообще не нуждаются в данных. Было бы обидно, если бы этажей было много!

Что делать, если супермаркет осуществляет доставку от двери до двери?
С Redux ¹ мы можем вставлять любые данные в любой компонент, не затрагивая другие компоненты, например:

¹ Если быть абсолютно точным, это другая библиотека под названием react-redux , которая передает данные в React. компоненты, а не сам Redux.Но поскольку react-redux просто выполняет все необходимые функции, а люди почти всегда используют Redux и react-redux вместе, я думаю, что это нормально, чтобы включить это как одно из преимуществ Redux.

Вставляйте данные в компоненты с помощью Redux. (Иллюстрация Beebee) (Большой предварительный просмотр)

Примечание : В последней версии React (16.3) есть новый «контекстный» API, который выполняет почти ту же работу с точки зрения подключения данных к компонентам. Так что, если это единственная причина, по которой ваша команда использует Redux, серьезно подумайте о переходе на React 16.3! Ознакомьтесь с официальным документом для получения дополнительной информации (предупреждение: впереди много кода).

Изменение данных

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

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

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

Разделите сложную логику на редукторы. (Иллюстрация Beebee) (превью в большом разрешении)

Тем не менее, следите за недавними разработками React. Как и в случае с «контекстным» API, в будущей версии React может быть новый API «setState».Это упростило бы разбиение сложной логики обновления на более мелкие части. Как только этот новый API станет доступным, возможно, вам больше не понадобится Redux для управления этим аспектом управления состоянием.

Реальная сила Redux

Пока кажется, что Redux — это просто лейбл для React. Люди используют Redux для улучшения аспектов, которые у React пока не очень хорошо получается. Но React быстро догоняет! Фактически, Дэн Абрамов, создатель Redux, пару лет назад присоединился к основной команде React в Facebook. Они были заняты работой над вышеупомянутыми улучшениями в React: контекстный API (выпущен в версии 16.3), улучшенный API извлечения данных (продемонстрирован в феврале 2018 года), лучший setState API и т. Д.

Сделает ли Redux устаревшим?

Угадайте, что? Я еще не показал вам настоящую мощь Redux!

Мощность Redux выходит за рамки управления состоянием. (Иллюстрация Beebee) (Большой превью)

Redux вынуждает разработчиков следовать нескольким строгим правилам, которые придают Redux большую мощность (да, силу дисциплины!):

Все данные (состояние приложения) должны быть описано открытым текстом.Вы должны уметь записывать все данные ручкой на бумаге.
Каждое действие (изменение данных) должно быть описано открытым текстом. Вы должны записать, что вы будете делать, прежде чем что-либо менять. Вы не можете изменить данные, не оставив отметки. Этот процесс на сленге Redux называется «отправка действия».
Ваш код, изменяющий данные, должен вести себя как математическая формула. Он должен возвращать тот же результат при том же вводе. Квадрат 4 всегда равен 16 независимо от того, сколько раз вы его запускаете.

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

² Я собрал эти примеры из сообщения Дэна Абрамова «Вам может не понадобиться Redux» и его «Тема вопросов для новичков React».

Отменить, повторить

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

Отменить, повторить. (Иллюстрация Beebee) (превью в большом разрешении)

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

Совместная среда

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

Google Docs (Иллюстрация Beebee) (Большой превью)

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

Оптимистичный пользовательский интерфейс

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

Оптимистичный пользовательский интерфейс (Иллюстрация Beebee) (большой предварительный просмотр)

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

Сердце Twitter (Иллюстрация Beebee) (превью в большом разрешении)

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

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

Сохранение и загрузка из состояния

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

Сохранение / загрузка прогресса игры (Иллюстрация Beebee) (превью в большом разрешении)

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

Действительно расширяемые системы

При использовании Redux вы должны «отправить» действие для обновления любых данных в приложении. Это ограничение позволяет отслеживать практически все аспекты того, что происходит в приложении.

Вы можете создавать действительно расширяемые приложения, в которых каждая функция может быть настроена пользователем.Например, обратите внимание на Hyper, приложение-терминал, созданное с помощью Redux. Расширение «hyperpower» добавляет брызги к курсору и встряхивает окно. Как вам этот «вау» режим? (Возможно, не очень полезно, но достаточно, чтобы произвести впечатление на пользователей)

Режим «вау» в Hyper, терминальном приложении. (Большой превью)

Отладка с перемещением во времени

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

Redux воплощает в жизнь эту мечту разработчиков. Redux DevTools позволяет вам управлять ходом работающего приложения как видео YouTube — перетаскивая ползунок!

Как это работает? Помните три строгих правила, которые применяет Redux? Это секрет волшебства.

Путешествие во времени в Redux DevTools Большой превью

Автоматические отчеты об ошибках

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

А теперь как насчет этого. Пользователь нажимает кнопку «Сообщить об ошибке». Система автоматически отправляет разработчику то, что она сделала. Разработчик нажимает кнопку «Воспроизвести ошибку» и смотрит, как именно происходит эта ошибка. Жучок раздавлен на месте, все довольны!

Это именно то, что произошло бы, если бы вы использовали Redux Bug Reporter. Как это работает? Ограничения Redux творят чудеса.

Автоматические сообщения об ошибках (Иллюстрация Beebee) (превью в большом разрешении)

Недостатки Redux

Три основных правила, которые применяет Redux, — палка о двух концах. Они обеспечивают мощные функции, но в то же время вызывают неизбежные недостатки.

Крутая кривая обучения

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

Код «Boilerplate»

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

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

Штраф за производительность

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

Бонус: Redux не только для React

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

Однако на самом деле Redux может работать с любыми интерфейсными фреймворками, такими как Angular, Ember.js или даже jQuery, или даже ванильным JavaScript.Попробуйте погуглить, вы найдете это, это, это или даже это. Общие идеи Redux применимы везде!

Если вы используете Redux с умом, вы можете получить его преимущества во многих ситуациях — не только в приложении React.

Redux хорошо работает с другими интерфейсными библиотеками. (Иллюстрация Beebee) (превью в большом разрешении)

Заключение

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

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

Понимать преимущества и ограничения технологии и проектировать соответственно. Я думаю, что именно это имел в виду Стив Джобс, говоря «дизайн — это то, как он работает».

(rb, ra, il)

reduxjs / redux: контейнер предсказуемого состояния для приложений JavaScript

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

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

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

Установка

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

  npm install @ reduxjs / toolkit react-redux

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

  npm установить redux

Дополнительные сведения см. На странице документации по установке.

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

Документы Redux расположены по адресу https://redux.js.org :

Экспорт PDF, ePub и MOBI для чтения в автономном режиме, а также инструкции по их созданию см. На странице: paulkogel / redux-offline-docs.

Оффлайн-документы см .: devdocs

Узнать Redux

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

Учебное пособие Redux Essentials — это учебное пособие «сверху вниз», которое учит, «как правильно использовать Redux», с использованием наших последних рекомендуемых API и передовых методов. Мы рекомендуем начать с этого.

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

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

Дополнительные уроки

Другие ресурсы

Redux FAQ отвечает на многие распространенные вопросы о том, как использовать Redux, а в разделе «Рецепты» docs содержится информация об обработке производных данных, тестировании, структурировании логики редуктора и сокращении шаблонов.

Сопровождающий

Redux Марк Эриксон из серии руководств «Practical Redux» демонстрирует реальные промежуточные и продвинутые методы работы с React и Redux (также доступен как , интерактивный курс на Educative.io ).
Список ссылок React / Redux разбит на категории статьи по работе с редукторами и селекторами, управлению побочными эффектами, архитектуре Redux и передовым практикам, а также многому другому.
Наше сообщество создало тысячи связанных с Redux библиотек, надстроек и инструментов.На странице документации «Экосистема» перечислены наши рекомендации, а также есть полный список, доступный в каталоге дополнений Redux .

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

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

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

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

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

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

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

Чтобы узнать больше о том, как должен использоваться Redux, см .:

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

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

Влияния

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

Базовый пример

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

 импорт {createStore} из "redux"

/ **
 * Это редуктор - функция, которая принимает значение текущего состояния и
 * объект действия, описывающий «что произошло», и возвращает новое значение состояния.* Сигнатура функции редуктора: (состояние, действие) => newState
 *
 * Состояние Redux должно содержать только простые объекты JS, массивы и примитивы.
 * Значением корневого состояния обычно является объект. Важно, чтобы вы
 * не изменять объект состояния, но возвращать новый объект, если состояние изменяется.
 *
 * Вы можете использовать любую условную логику в редукторе. В этом примере
 * мы используем оператор switch, но это не обязательно.
 * /
function counterReducer (state = {value: 0}, action) {
  переключатель (действие. тип) {
    case 'счетчик / увеличенный':
      return {значение: state.value + 1}
    case 'счетчик / уменьшение':
      return {значение: state.value - 1}
    дефолт:
      состояние возврата
  }
}

// Создаем хранилище Redux, в котором хранится состояние вашего приложения.
// Его API: {subscribe, dispatch, getState}.
пусть store = createStore (counterReducer)

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

store.subscribe (() => console.log (store.getState ()))

// Единственный способ изменить внутреннее состояние - отправить действие.
// Действия можно сериализовать, зарегистрировать или сохранить, а затем воспроизвести.
store.dispatch ({тип: 'счетчик / увеличенный'})
// {значение: 1}
store.dispatch ({тип: 'счетчик / увеличенный'})
// {значение: 2}
store. dispatch ({тип: 'счетчик / уменьшение'})
// {значение: 1}

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

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

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

Redux Toolkit, пример

Redux Toolkit упрощает процесс написания логики Redux и настройки хранилища. В Redux Toolkit такая же логика выглядит так:

 import {createSlice, configureStore} из '@ reduxjs / toolkit'

const counterSlice = createSlice ({
  имя: 'счетчик',
  начальное состояние: {
    значение: 0
  },
  редукторы: {
    увеличено: состояние => {
      // Redux Toolkit позволяет нам писать "изменяющуюся" логику в редукторах.Это
      // фактически не изменяет состояние, потому что использует библиотеку Immer,
      // который обнаруживает изменения в "состоянии черновика" и создает совершенно новый
      // неизменное состояние на основе этих изменений
      state.value + = 1
    },
    уменьшено: состояние => {
      state.value - = 1
    }
  }
})

экспорт const {увеличивается, уменьшается} = counterSlice.actions

const store = configureStore ({
  редуктор: counterSlice. reducer
})

// Все еще можно подписаться на магазин
store.subscribe (() => консоль.журнал (store.getState ()))

// По-прежнему передаем объекты действия в `dispatch`, но они созданы для нас
store.dispatch (увеличено ())
// {значение: 1}
store.dispatch (увеличено ())
// {значение: 2}
store.dispatch (уменьшено ())
// {значение: 1}

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

Примеры

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

Отзывы

«Мне нравится то, что вы делаете с Redux»
Цзин Чен, создатель Flux

«Я попросил прокомментировать Redux во внутренней группе обсуждения JS FB, и он получил всеобщую похвалу. Действительно потрясающая работа ».
Билл Фишер, автор документации Flux

«Здорово, что вы изобретаете лучший Flux, не делая Flux совсем».
Андре Стальц, создатель Cycle

Спасибо

Особая благодарность Джейми Пэтону за передачу имени пакета redux NPM.

Логотип

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

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

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

Покровители

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

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

Лицензия

MIT

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

Redux — это облегченный инструмент управления состоянием для приложений JavaScript, выпущенный в 2015 году и созданный Дэном Абрамовым и Эндрю Кларком.

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

Согласно официальной документации, Redux был основан на трех основных принципах:

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

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

Мастер Redux.

Курс Redux

Educative научит вас использовать Redux с React и javascript, чтобы вы могли разрабатывать мощные веб-приложения.

Обучение Redux

С помощью хуков , функциональности и Context API , встроенных в React, некоторые задаются вопросом, нужен ли Redux для создания более крупного приложения для реагирования. Ответ положительный. Хотя он может вам не понадобиться для простого приложения React, он понадобится вам, когда ваши приложения станут более сложными.Контекстный API не заменяет Redux.

Проблемы с Context API возникают при расширении вашего приложения. В более крупном приложении порядок перемещения данных может иметь значение. С Redux вы можете вести учет изменений в вашем состоянии и путешествовать во времени назад к этим изменениям.

Более того, Redux более эффективен, чем автономный React, потому что Context часто требует повторного рендеринга.

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

Безусловно, Redux обеспечивает масштабируемость, простую отладку и промежуточное ПО. Также важно отметить, что контекст и Redux нельзя сравнивать в одной категории, поскольку Redux отделен от уровня пользовательского интерфейса и является системой управления состоянием, а контекст — нет.

Введение в Redux и то, как обновляется состояние в приложении Redux

, Syeda Aimen Batool.

. Фото Фабиана Грооса на Unsplash.

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

Сегодня я собираюсь поделиться несколькими основными концепциями Redux без использования какой-либо библиотеки представлений (React или Angular). Это своего рода личная заметка для использования в будущем, но она также может помочь другим.

Давайте копаться вместе!

Что такое Redux?

Redux — это библиотека с открытым исходным кодом для улучшения предсказуемости состояния в приложении JavaScript.Это независимая библиотека. Он обычно используется с другими библиотеками, такими как React и Angular, для лучшего управления состоянием приложения. Redux был создан Дэном Абрамовым в 2015 году для эффективного управления сложным состоянием.

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

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

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

Redux Store:

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

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

Правило №1 — Единый источник истины

Состояние всего вашего приложения хранится в дереве объектов в едином хранилище. — Официальные документы

Способы взаимодействия с деревом состояний:

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

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

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

getState () — возвращает текущее состояние приложения.
отправка (действие) — единственный способ обновить состояние — отправить действие, а отправка (действие) служит этой цели. Поговорим подробнее чуть позже.
subscribe (слушатель) — цель этого метода — отслеживать изменения состояния.Каждый раз, когда состояние изменяется, оно вызывается и возвращает обновленное состояние.
replaceReducer (nextReducer) — заменяет редуктор, который в настоящее время используется хранилищем для вычисления состояния.

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

Обновление состояния в приложении:

Единственный способ обновить состояние — это отправить действие. Это второе правило.

Правило № 2 — Состояние только для чтения

Действие — это простой объект JavaScript для отслеживания конкретного события, происходящего в приложении.Что делает его особенным, так это свойство «типа», которое является его необходимой частью.

  {type: "ADD_BOOK_TO_THE_CART"}

Основная цель этого свойства — сообщить Redux о происходящем событии. Этот тип должен описывать действие. Наряду со свойством «тип» он может содержать другую информацию о происходящем событии.

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

Здесь у нас есть действие по добавлению книги в корзину.

Определив действие, мы передаем его диспетчеру. store.dispatch () — это функция, предоставляемая библиотекой, которая принимает действие для выполнения действия против состояния. Redux ограничивает обновление состояния только этим методом.

Этот строгий способ обновления состояния гарантирует, что состояние не может быть изменено напрямую ни просмотром, ни каким-либо сетевым обратным вызовом. Единственный способ обновить состояние — это определить действие и затем отправить его.Помните, что действия — это простые объекты JavaScript. Действия можно регистрировать, сериализовать и воспроизводить для целей отладки.

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

Правило № 3 — Изменения вносятся с помощью чистых функций

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

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

Поскольку редукторы являются чистыми функциями, они должны иметь следующие атрибуты:

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

Процесс.

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

Поток обновления состояния в Redux

Что мы узнали на данный момент?

Давайте подведем итог тому, что мы узнали, чтобы соединить точки.

Redux — Контейнер предсказуемого состояния с открытым исходным кодом
Дерево состояний — Простой объект JavaScript, который содержит все состояние приложения
Три способа взаимодействия с состоянием (единственные способы):
Хранилище — Отдельный блок, содержащий состояние дерево и методы для взаимодействия с деревом состояний
Действия — Планирование объектов Javascript для описания происходящего действия
Редукторы — Чистые функции Javascript для принятия текущего состояния и действия для возврата нового состояния

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

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

Скажи привет @aimenbatool.

Определение Redux от Merriam-Webster

re · dux

| \ (ˌ) rē-ˈdəks

, ˈRē-ˌdəks \

: возвращено

—Используется постположительно

Redux — Обзоры, плюсы и минусы

Репост

Обзор: Проще говоря, мы планируем использовать стек MERN для создания нашего веб-приложения. MongoDB будет использоваться в качестве нашей основной базы данных. Мы будем использовать ExpressJS вместе с Node.js для настройки конечных точек API. Кроме того, мы планируем использовать React для создания нашего SPA на стороне клиента и использовать Redis на стороне сервера в качестве основного решения для кэширования. Изначально, работая над проектом, мы планируем развернуть наш сервер и клиент как на Heroku. Однако Heroku очень ограничен, и нам понадобятся преимущества инфраструктуры как услуги, поэтому мы будем использовать Amazon EC2 для последующего развертывания нашей финальной версии приложения.

Серверная сторона: nodemon позволит нам автоматически перезапускать работающий экземпляр нашего приложения node при изменении файлов. Мы решили использовать MongoDB, потому что это нереляционная база данных, которая использует объектную модель документа. Это обеспечивает большую гибкость по сравнению с СУБД, такой как SQL, которая требует очень структурной модели данных, которая не меняется слишком сильно. Еще одна сильная сторона MongoDB — простота масштабируемости. Мы будем использовать Mongoose вместе с MongoDB для моделирования данных нашего приложения.Кроме того, мы разместим наш кластер MongoDB удаленно на MongoDB Atlas. Bcrypt будет использоваться для шифрования паролей пользователей, которые будут храниться в БД. Это сделано для того, чтобы избежать рисков хранения паролей в виде простого текста. Более того, мы будем использовать Cloudinary для хранения изображений, загруженных пользователем. Мы также будем использовать Twilio SendGrid API, чтобы включить автоматические электронные письма, отправляемые нашим приложением. Чтобы защитить частные конечные точки API, мы будем использовать JSON Web Token и Passport. Кроме того, PayPal будет использоваться в качестве платежного шлюза для приема платежей от пользователей.

Клиентская сторона: Как упоминалось ранее, мы будем использовать React для создания нашего SPA. React использует виртуальную модель DOM, которая очень эффективна при отрисовке страницы. Также React позволит нам повторно использовать компоненты. Кроме того, он очень популярен, и существует большое сообщество, которое использует React, поэтому он может быть полезен, если у нас возникнут проблемы. Позже мы также планируем создать кроссплатформенное мобильное приложение, и использование React позволит нам повторно использовать большую часть нашего кода с React Native. Redux будет использоваться для управления состоянием.Redux отлично работает с React и поможет нам управлять глобальным состоянием в приложении и избежать сложностей, связанных с тем, что каждый компонент имеет собственное состояние. Кроме того, мы будем использовать компоненты Bootstrap и собственный CSS для стилизации нашего приложения.

Другое: Git будет использоваться для контроля версий. На более поздних этапах нашего проекта мы будем использовать Google Analytics для сбора полезных данных о взаимодействиях пользователей. Более того, Slack будет нашим основным средством коммуникации. Кроме того, мы будем использовать Visual Studio Code в качестве основного редактора кода, потому что он очень легкий и имеет широкий спектр расширений, которые повысят производительность.Почтальон будет использоваться для взаимодействия с нашими конечными точками API и отладки.

Redux против API контекста React

# Redux против API контекста React

В течение последних нескольких лет Redux был THE решением управления состоянием для более крупных приложений React.

Он далеко не мертв, но у него появляется сильный враг: Контекстный API React!

В этой статье:

# Что такое Redux?

Redux используется для централизованного управления состоянием приложения React.«Состояние» просто относится к данным, необходимым для правильной визуализации пользовательского интерфейса. Примеры:

Продукты в корзине для покупок
Информация о том, ожидает ли пользователь завершения HTTP-запроса

Технически Redux не ограничивается использованием в приложениях React — и действительно, есть реализации в других технологиях. тоже (например, NgRx для Angular). Но Redux особенно популярен для React.

Он состоит из четырех основных строительных блоков:

A единый централизованный государственный (т.е. можно сказать, глобальный объект JS), который является , а не , напрямую доступным или изменяемым
Функции-редукторы , которые содержат логику для изменения и обновления глобального состояния (путем возврата новой копии старого состояния со всеми необходимыми изменения)
Действия , которые могут быть отправлены для запуска функции редуктора для запуска
Подписки для получения данных из глобального состояния (например, для использования их в компонентах React)

Для более подробного объяснения того, как работает Redux, посетите официальную документацию.

В приложении React у вас обычно есть пара действий или создателей действий, например (с преобразователем redux, используемым для поддержки асинхронных действий):

  export const ADD_PRODUCT_TO_CART = 'ADD_PRODUCT_TO_CART'
константа экспорта REMOVE_PRODUCT_FROM_CART = 'REMOVE_PRODCUT_FROM_CART'

export const addProductToCart = product => {
  возвратная отправка => {
    setTimeout (() => {
      отправлять({
        тип: ADD_PRODUCT_TO_CART,
        полезная нагрузка: продукт,
      })
    }, 700)
  }
}

export const removeProductFromCart = productId => {
  возвратная отправка => {
    setTimeout (() => {
      отправлять({
        тип: REMOVE_PRODUCT_FROM_CART,
        полезная нагрузка: productId,
      })
    }, 700)
  }
}

У вас также есть редуктор для обновления вашего глобального состояния:

  import {ADD_PRODUCT_TO_CART, REMOVE_PRODUCT_FROM_CART} из '. / действия '

const initialState = {
  товары: [
    {id: 'p1', title: 'Gaming Mouse', цена: 29,99},
    {id: 'p2', title: 'Гарри Поттер 3', цена: 9,99},
    
  ],
  корзина: [],
}

const shopReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_PRODUCT_TO_CART:
      
      
      return {... state, cart: updatedCart}
    case REMOVE_PRODUCT_FROM_CART:
      
      return {... state, cart: updatedCart}
    дефолт:
      состояние возврата
  }
}

Хранилище будет создано и передано оболочке вокруг корневого компонента приложения:

 
импортировать {createStore, applyMiddleware} из redux
импортировать {Provider} из 'response-redux'
импортировать reduxThunk из 'redux-thunk'


импортный магазин-редуктор от './ магазин / редукторы

const store = createStore (shopReducer, applyMiddleware (reduxThunk))

ReactDOM.render (
   {} 
  ,
  document.getElementById ('корень')
)

Любой компонент в приложении затем может быть подключен к глобальному хранилищу Redux (через пакет response-redux):

 
импортировать {подключиться} из 'react-redux'
импортировать {addProductToCart} из ". ./store/actions"

class ProductsPage extends Component {
  оказывать() {
    возвращаться (
      <Реагировать.Фрагмент>
        
        
          {}
        
      
    )
  }
}

const mapStateToProps = state => {
  возвращаться {
    продукция: гос.продукты,
    cartItemCount: state.cart.reduce ((count, curItem) => {
      return count + curItem.quantity
    }, 0),
  }
}

const mapDispatchToProps = dispatch => {
  возвращаться {
    addProductToCart: product => dispatch (addProductToCart (product)),
  }
}

экспорт подключения по умолчанию (mapStateToProps, mapDispatchToProps) (ProductsPage)

Метод connect устанавливает подписку за кулисами.

Это Redux, и вкратце, как его использовать в приложении React. Как работает React Context API?

# Что такое API контекста React?

Контекстный API React предназначен для решения простой проблемы, с которой вы столкнетесь в любом нетривиальном приложении React: как вы можете управлять состоянием, которое вам нужно, в нескольких, не связанных напрямую компонентах?

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

  const Button = props => (
   {} Щелкните меня
  
);

const Form = props => (
  <форма>

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

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

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

Контекстный API React предоставляет сравнимый способ передачи данных.

Обычно он состоит из трех строительных блоков:

# Объект контекста

  import React from 'react'

экспорт по умолчанию React.createContext ({})

Вы можете определить объект Context в отдельном файле или рядом с компонентом в файле компонента. Вы также можете иметь несколько объектов Context в одном приложении.

Но что такое — это контекст ?

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

Для этого недостаточно создать объект Context, вам также необходимо, чтобы предоставил его !

# Обеспечение контекста

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

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

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

Вы предоставляете такой контекст:

 
импортировать ShopContext из './ путь / к / контекст-магазин ';

class App extends Component {
  оказывать() {
    возвращаться (
      
        {}
      
    );
  }
}

Обратите внимание на значение prop в : значение, которое вы здесь устанавливаете, пересылается в обернутые дочерние компоненты. И если значение изменится, оно также изменится в дочерних компонентах.

Тот факт, что обновления данных, переданных в значение , , принимаются потребителями нашего контекста и позволяют нам использовать API контекста в качестве инструмента глобального управления состоянием.

# 3. Потребляющий контекст

Для этого давайте сначала посмотрим, как другие компоненты могут использовать контекст. У нас есть два варианта:

3.1 Использование Context.Consumer

 
импортировать ShopContext из '../context/shop-context'

class ProductsPage extends Component {
  оказывать() {
    возвращаться (
       {} {context => (
          
             {
                return count + curItem.quantity
              }, 0)}
            />
             ... 
          
        )}
       Consumer>
    )
  }
}

экспорт по умолчанию ProductsPage

— это компонент-оболочка, который мы можем использовать для «внедрения» контекста, предоставленного в некоторый родительский компонент (не обязательно должен быть непосредственным родителем) в этот дочерний компонент.

Контекст принимается в качестве аргумента функции, которую вы передаете как прямой дочерний элемент . Это важно! Вы не (напрямую) размещаете JSX между ... .

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

`3.2 Использование static contextType`

Помимо использования , мы также можем получить доступ к нашему Context, установив статическое свойство в нашем (основанном на классе) дочернем компоненте. Важно: В отличие от , который вы можете использовать в функциональных компонентах на основе классов и , этот метод будет работать только в компонентах на основе классов («с отслеживанием состояния»)!

Примечание: с помощью React Hooks у вас также есть возможность подключаться к контексту в любом месте функциональных компонентов.См. Часть 2 этой статьи.

 
импортировать ShopContext из '../context/shop-context'

class CartPage extends Component {
  static contextType = ShopContext
  componentDidMount () {
    
    console.log (this.context)
  }

  оказывать() {
    возвращаться (
       Fragment>
         {
            return count + curItem.quantity
          }, 0)}
        />
        ... 
      
    )
  }
}

export default CartPage

React предоставит вам свойство this.context в ваших компонентах на основе классов, если вы установите static contextType = YourContext в компоненте. Большим преимуществом является то, что - в отличие от предыдущего подхода - теперь вы можете использовать объект Context в любом месте вашего компонента (включая такие места, как componentDidMount ).

`# Обновление состояния через контекст`

На данный момент мы:

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

Как мы теперь можем изменять и обновлять контекст данные?

Помните, что мы передаем объект как значение нашему поставщику контекста:

   Provider
  value = {{
    товары: [],
    корзина: [],
  }}
>
  ...

Поскольку это происходит в обычном компоненте React - e.грамм. App.js с компонентом - мы можем использовать обычное решение управления состоянием React для обновления данных в этом компоненте => состояние и setState () (или, как описано в части 2, useState () ).

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

  import React, {Component} from 'react';
импортировать ShopContext из './shop-context';

class App extends Component {
  state = {
    товары: [
      {id: 'p1', title: 'Gaming Mouse', цена: 29.99},
      {id: 'p2', title: 'Гарри Поттер 3', цена: 9,99},
      ...
    ],
    тележка: []
  };

  addProductToCart = product => {
    const updatedCart = [... this.state.cart];
    
    
    this.setState ({cart: updatedCart});

  };

  removeProductFromCart = productId => {
    const updatedCart = [. .. this.state.cart];
    
    
    this.setState ({cart: updatedCart});
  };

  оказывать() {
    возвращаться (
      
        ...
      
    );
  }
}

экспорт по умолчанию GlobalState;

В этом фрагменте мы работаем с состоянием так же, как и с компонентом, который вообще не использует контекст.

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

Особенно интересна часть с двумя методами.

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

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

Вот как работает глобальное управление состоянием при использовании React Context вместо Redux.

Пожалуйста, просмотрите готовый код («Ресурсы» в начале статьи), а также видеоурок (также в начале этой страницы), где вы найдете полное пошаговое руководство и рабочий мини-проект!

`# Заменит ли React Context API Redux?`

Сложный вопрос.

Действительно, есть причины, по которым React Context лучше Redux.

Он встроен в React, поэтому вам не нужны дополнительные сторонние зависимости - в результате получается меньший пакет и улучшенная ремонтопригодность проекта.API также относительно прост в использовании, как только вы освоите его (особенно при использовании хуков, см. Часть 2). Вам также не нужен такой пакет, как redux-thunk , для обработки асинхронных действий.

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

Но есть одна важная ошибка!

Контекстный API (в настоящее время) не предназначен для высокочастотных обновлений (цитата из Себастьяна Маркбиджа, React Team), он не оптимизирован для этого.Команда react-redux столкнулась с этой проблемой, когда попыталась переключиться на React Context внутри своего пакета.

Мое личное резюме заключается в том, что новый контекст готов к использованию для маловероятных обновлений с низкой частотой (например, локаль / тема). Также хорошо использовать его так же, как и старый контекст. Т.е. для статических значений, а затем распространять обновления через подписки. Он не готов к использованию в качестве замены для распространения всех состояний, подобных Flux. --- Себастьян Марбидж

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

Апрель 2024
Пн	Вт	Ср	Чт	Пт	Сб	Вс
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

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

Что такое Redux простыми словами? — Хабр Q&A

Как работает Redux?. Недавно во время интервью мне задали… | by Ivan Eroshkin

Во-первых, что такое Redux?

Что делает Redux особенным?

Как это работает?

Initial state

Actions/Dispatches

Reducers

Store

Subscribe

Initial state

Actions/Dispatches

Reducers

Редакс в реальной жизни — доклад Ивана Акулова

Введение в Redux

1- Что такое Redux?

ELM

Flux vs Redux:

2- Архитектура Flux

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

Когда, зачем и почему может быть полезным Redux / WAYUP

Что такое redux, если я использую базу данных для своего приложения react?

3 ответа

Похожие вопросы:

Главная страница — Русский перевод Redux Saga

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

Примеры счётчика

пример с корзиной

реальный пример (с горячей перезагрузкой webpack)

A Designer’s Guide — Smashing Magazine

Что такое Redux?

Почему вам должно быть до этого дело?

Что умеет Redux?

Управление состоянием

Получение и сохранение данных

Назначение данных элементам пользовательского интерфейса

Изменение данных

Реальная сила Redux

Отменить, повторить

Совместная среда

Оптимистичный пользовательский интерфейс

Сохранение и загрузка из состояния

Действительно расширяемые системы

Отладка с перемещением во времени

Автоматические отчеты об ошибках

Недостатки Redux

Крутая кривая обучения

Код «Boilerplate»

Штраф за производительность

Бонус: Redux не только для React

Заключение

reduxjs / redux: контейнер предсказуемого состояния для приложений JavaScript

Установка

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

Узнать Redux

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

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

Дополнительные уроки

Другие ресурсы

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

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

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

Влияния

Базовый пример

Redux Toolkit, пример

Примеры

Отзывы

Спасибо

Логотип

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

Покровители

Лицензия

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

Мастер Redux.

Введение в Redux и то, как обновляется состояние в приложении Redux

Что такое Redux?

Redux Store:

Правило №1 — Единый источник истины

Обновление состояния в приложении:

`3.2 Использование static contextType`

`# Обновление состояния через контекст`

`# Заменит ли React Context API Redux?`

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