Концепция Redux из реального мира

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

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

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

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

Начинаем путь в банк за кэшем!

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

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

Когда вы идете в банк, вы имеете в виду только одно намерение / действие, то есть WITHDRAW_MONEY.

Вы пришли в банк!

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

Джо в банке! Он идет прямо к кассиру и сообщает о своей просьбе.

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

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

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

Как Redux вписывается в эту историю?

Мы скоро вернемся к более подробной информации, но сначала о терминологии. Но вкратце в этом процессе действуют следующие ассоциативные детали:

ассоциативная модель Банкареальная модель Reduxтип
банкхранилище (store)объект
персонажкомпонент (component)функция
кэш/деньгиданные/состояние (state)объект
намерениедействие (action)объект
кассирдиспетчер (dispatch)функция
компьютерредьюсер (reducer)функция
ассоциативная таблица сопоставления понятий моделей
1. БАНКОВСКОЕ ХРАНИЛИ для банка — это то же самое, что REDUX STORE для Redux.
Банковское хранилище можно сравнить с Redux Store!

Банковское хранилище хранит деньги в банке, верно?

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

Вы должны запомнить это, хорошо?

Redux Store можно сравнить с банковским хранилищем. Он хранит состояние вашего приложения и обеспечивает его безопасность.

Это приводит к первому принципу Redux:

Наличие единого источника информации: состояние всего вашего приложения хранится в дереве объектов в одном хранилище Redux.

Не позволяйте словам сбить вас с толку.

Проще говоря, с Redux рекомендуется хранить состояние вашего приложения в одном объекте, управляемом Redux STORE. Это как иметь ОДНО ХРАНИЛИЩЕ вместо того, чтобы разбрасывать деньги по всему банковскому залу.

2. Отправляемся в банк с мыслями о ДЕЙСТВИИ

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

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

То же самое можно сказать и о Redux.

Пишите столько кода, сколько хотите, но если вы хотите обновить состояние вашего приложения Redux (как вы делаете с setState в React), вам нужно сообщить Redux об этом с помощью действия action.

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

Теперь это приводит к принципу Redux № 2

Состояние доступно только для чтения и единственный способ изменить состояние — запустить действие, объект, описывающий, что произошло.

Что это значит на простом языке?

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

Если мы решили представить этот процесс в простом приложении Redux, ваше действие с банком может быть представлено объектом, который может выглядеть так:

{ 
  type: "WITHDRAW_MONEY",
  amount: "$10,000"
}

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

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

Пока не зацикливайтесь на том, как отправить действие. Просто поймите, что говорит принцип.

Вот как создается хранилище программно:

import { createStore } from "redux"; //импортируем библиотеку redux
import reducer from "./reducers" 

const store = createStore(reducer);
//далее смотрите секцию, как создается импортированный ркдьюсер
3. КАССИР для банка то же, что РЕДУКТОР для REDUX
По хорошему счету, логично было бы предположить, что кассир — это диспетчер, в котором оборачивается редуктор в виде вычислительного устройства, но для упрощения сойдет и так.

Ладно, сделаем шаг назад.

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

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

Связь кассира и хранилища!

То же самое можно сказать и о Redux.

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

Этот процесс в основном называется ОТПРАВКА ДЕЙСТВИЯ или DISPATCHING ACTION.

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

Редьюсер знает, что делать. В этом примере он примет ваше действие к WITHDRAW_MONEY и гарантирует, что вы получите свои деньги.

В терминах Redux деньги, которые вы тратите, — это ваше состояние. Итак, ваш редьюсер знает, что делать, и всегда возвращает ваше новое состояние.

Хм. Это было не так уж сложно понять, верно?

И это приводит к последнему принципу Redux:

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

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

4. Никогда не изменяйте состояние в редьюсерах.
Проще говоря, редьюсер — это просто функция, которая принимает состояние и действие и возвращает новое состояние.
export default (state, action) => {
  return state;
};

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

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

Технически вы никогда не должны делать этого:

export default (state=[], action) => {
  state.push('new value');//ошибка так делать
  return state
};

Предпочтительнее так:

export default (state=[], action) => {
  return [...state, 'new value']
};

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

Благодаря оператору spread в ES6 мы можем это записать как [...state, 'new value'].

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

Заключение

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

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

Пожалуйста, оцените материал

Концепция Redux из реального мира