6 часов назад мне было интересно, что такое Redux…?? Запутался и посмотрел несколько видео на YouTube и прочитал несколько руководств в течение 2–3 часов.

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

Redux — это структура управления состоянием для поддержки крупномасштабных приложений. Redux можно использовать как для ReactJS, так и для Angular Front-end. Сам в основном знаком с ReactJS, в ReactJS; мы устанавливаем состояние при построении, используя ключевые слова «this.state» и «this.setState». Это возможно в небольшом приложении.

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

В этот момент в игру вступает Redux,

Это самая простая диаграмма, иллюстрирующая рабочий процесс Redux.

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

Если на стороне просмотра созданы какие-либо действия; это запуститнекоторые действия для создателей действий в Redux. Затем мы должны отправить это действие в магазин.

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

Давайте посмотрим один за другим.

  1. Магазин: отвечает за все состояние вашего приложения.

Метод с именем createStore() для объекта Redux, который вы используете для создания хранилища. Этот метод принимает функцию reducer в качестве обязательного аргумента.

Например

const store = Redux.createStore(reducer_Name);

Теперь посмотрим, что такое редуктор..?

2. Редуктор: как определено ранее, редюсер — это функция, которая принимает текущее состояние и состояние, измененное создателем действия, сравнивает их и возвращает состояние.

let initialState = 0;
const reducer = (currentState= initialState, stateFromAction) => {
//Here it will compare the state of initialSate & stateFromAction & //if there any changes then
//currentState = stateFromAction
//if no changes currentState= initialState
return currentSatate;
}

Наконец, он вернет currentState.

3. Action Creator & Actions: все изменения состояния инициируются отправкой действий. Действие похоже на объект JavaScript, который содержит событие действия, которое произошло. Как его объект. он должен иметь атрибут «type», который определяет тип произошедшего действия.

Например, произошло событие входа в систему. Итак, тип — LOGIN (обычно значения действий пишутся заглавными буквами).

Action Creator — это функция, которая возвращает действие, которое было выполнено в слое View.

Например :

const action = {
type: 'LOGIN'
}
// Define an action creator here:
function actionCreator(){
return action;
};

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

store.dispatch(actionCreator());

Приведенный выше код отправит действие в магазин.

Давайте попробуем простое приложение счетчика в Redux.

// define a constant for increment action types
const INCREMENT = 'INCREMENT'; 
// define a constant for decrement action types
const DECREMENT = 'DECREMENT'; 
let initialState = 0;
const counterReducer = (state = initialState, action) =>{
switch(action.type){
   case INCREMENT:
       return state + 1;
       break;
   case DECREMENT :
       return state -1;
       break;
   default:
       return state;
       break;
}
};
// define an action creator for incrementing
const incAction = () => {
  return {
     type: INCREMENT
}};
// define an action creator for decrementing
const decAction = ()=>{
   return {
      type: DECREMENT
}};
const store = Redux.createStore(counterReducer);
// define the Redux store here, passing in your reducers

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

incAction и decAction — это функция создателя действия (без создания действия и возврата его внутри функции создания действия; я полностью создаю его в средстве создания действия)

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

Switch case принимает аргумент action.type (здесь type — это атрибут, значение, которое мы помещаем в функцию создания действия) и проверяет возможности и возвращает подходящие функции.

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

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

Счастливого кодирования, ребята...!!!