Что такое Redux? Когда? Почему ?

Что такое Redux?

Redux - это библиотека, которая используется для управления предсказуемым состоянием. Она предоставляет контейнер предсказуемого состояния для приложений JavaScript. Он широко используется в приложениях на основе MVC. Его разработал » «Дан Абрамов.

Что такое предсказуемое состояние?

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

Мотивация Redux

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

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

Когда использовать Redux?

Если ваше приложение слишком мало, чтобы оно могло обрабатывать свое состояние в пределах своей области видимости, не используйте Redux.
Redux очень полезен для крупномасштабных приложений. Когда объем данных становится больше, управлять их состоянием становится действительно сложно. Вот где появился Redux.
Redux также делает код более модульным, что также является большим преимуществом.
Если вы только изучаете React? Не делайте Redux своим первым выбором. Управляйте состоянием в компонентах, разделяя состояние, когда ваше обучение станет достаточно зрелым для разработки крупномасштабных приложений, тогда попробуйте!
Redux не является обязательным в ваших приложениях. Это как еще один инструмент в арсенале разработчика.

Понимание архитектуры

Принципы Redux

Для понимания архитектуры Redux он разделен на три части.

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

Единый источник истины (объект-хранилище)

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

Пример :

// ===== global state ====== 
{
 user : ‘user one’,
 tasks : [ { … } , { … } , { … }],
}

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

Состояние Redux только для чтения

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

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

Изменение состояния с помощью чистой функции (Редуктор)

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

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

Redux состоит из трех основных блоков.

1- Действия

2- Редуктор

3- Создание магазина

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

Действия

Действия - это информация или данные, которые вы отправляете в свое приложение для хранения.
В качестве подробного описания действий приведу пример банка. Вы идете в банк и говорите менеджеру открыть вам счет. Что теперь происходит?
1- Менеджер прислушивается к вашим действиям.

2- Менеджер выполнит некоторые действия и создаст вам аккаунт в магазине банка.

3- Менеджер сообщает вам, что счет открыт!

Точно так же работает Redux! Вы сказали менеджеру открыть новую учетную запись и дали некоторые детали. Это было действие.
Действия бывают двух типов: 1 - синхронные действия 2 - асинхронные действия
** сначала рассмотрим синхронные действия **

Действия отвечают за отправку данных в хранилище. Это делается с помощью метода dispatch(), который доступен в storeobject.
Конкретное действие состоит из двух вещей.

1 - тип желаемого изменения.

2 - Данные, которые вы хотите отправить в хранилище. (обычно называется полезной нагрузкой)

пример :

// action for creating an account in bank 
let details = {
   name : 'Rehan',
   age : 19,
   gender : 'male',
   status : 'student'
};
//action
let openMyAccountAction = { type : 'OPEN_MY_ACCOUNT', payload: details };

мы успешно создали первое действие. перейдем к следующему шагу !!

Редуктор

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

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

// Reducer 
// creating default state for handling undefined case.
let defaultState = {
    accounts : []
};
const manager = (state = defaultState,  action) => {
 // REDUX STATE IS READ ONLY!! so copy it in a newState, change      // the new state and return that state!
 
   let newState = { ...state };
    // switch cases to match the action
    switch( action.type ) { 
      
    case 'OPEN_MY_ACCOUNT':
      newState.accounts = [ action.details, ...newState.accounts ];
      break;
    // many more cases     
   }; 
 
return newState;
};

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

1– Сначала мы создали defaultState, потому что, когда состояние инициализируется без него, оно будет неопределенным! Чтобы избежать неопределенного состояния, мы инициализируем его с помощью объекта, содержащего свойство accounts, которое представляет собой массив учетных записей.

2 - На втором этапе мы создаем обычную функцию, которая принимает состояние и действие в качестве аргумента.

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

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

newState.accounts : [ action.details, ...newState.accounts ];

Затем break выскочит из тела переключателя и, наконец, мы вернем newState.

Поздравляем, вы успешно создали Редуктор!

Последний шаг: создание магазина

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

import { createStore } from 'redux';
const store = createStore(manager); // takes reducer as argument.

Первый шаг - импортировать createStore из redux, затем второй шаг - вызвать его с помощью только что созданного reducer . В нашем случае мы создали редуктор с именем manger , поэтому мы передаем аргумент manager as.

у нас также может быть несколько редукторов. Как один manager reducer, а другой accountant reducer. Мы немного изменили синтаксис для него.

import { createStore, combineReducers } from 'redux';
export default bankReducer = combineReducer( { 
       manager, // manager reducer 
       accountant  // accountant reducer 
});
const store = createStore(bankReducer);

у нас есть другая функция combineReducer, которая берет объект редукторов и объединяет их в один редуктор. Этот единственный редуктор передается в хранилище.

поздравляю! Вы успешно выполнили третий шаг!

Ваш магазин Redux готов. Пришло время разослать действия.

let details = {
   name : 'Rehan',
   age : 19,
   gender : 'male',
   status : 'student'
};
//action
let openMyAccountAction = { type : 'OPEN_MY_ACCOUNT', : details };
store.dispatch(openMyAccountAction);

store.dispatch()это метод отправки действия. Это действие перейдет к Reducer, Reducer выполнит управление состоянием и обновит объект хранилища, затем будет возвращен обновленный этап.

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

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

Получение обновленного состояния

Для получения состояния мы можем использовать другой метод store.getState();

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

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

Это все для синхронного потока Redux!

Живой код здесь:

CodeSandbox
CodeSandbox - это онлайн-редактор, специально предназначенный для веб-приложений. codesandbox.io

ТВОЕ ЗАДАНИЕ

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

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

3 - Вы должны отправить эти новые действия и протестировать состояние.

Заключение

В этой статье мы подробно рассмотрели основы Redux, например, что такое redux? Когда использовать Redux? архитектура Redux, Flow of Redux на небольшом примере. Мы рассмотрели синхронный поток, и в следующих статьях я также расскажу о потоке Asycn. Будьте на связи!
Удачного кодирования :)

# Идеально (Y)

Что такое Redux? Когда? Почему ?