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

Redux более адаптируем и популярен среди разработчиков. Фактически, когда дело доходит до библиотек управления состоянием, Redux оказывается вариантом №1 среди фронтенд-разработчиков. Когда разработчики работают над большим проектом, используя самые популярные фреймворки Angular, React или Vue, ключевым фактором, с которым они сталкиваются, является библиотека управления состоянием. При использовании Redux сохраняется несколько препятствий, которые пытается устранить инструментарий Redux js. В результате команда Redux явно поддерживает использование этого набора инструментов для устранения проблем. Сейчас настало время для компаний сделать эту область приоритетной.

Как работает Редукс?

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

Главный вывод:

1. Пользователь взаимодействует с представлением, чтобы инициировать событие действия.
2. Редуктор получает действие от события отправки и соответствующим образом обновляет состояние.
3. Когда состояние обновляется в магазине, изменения изменяются с помощью метода подписки, и View соответствующим образом обновляет свой пользовательский интерфейс.

Чтобы понять, как работает Redux, важно изучить три компонента потока Redux: Action, Редуктор и хранилище.

I. Actions

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

II. Reducer

• Редюсер — это чистая функция.
• Он принимает текущее значение состояния и обновляет его в соответствии с действием отправки.

III. Store

• Store — это контейнер состояний, в котором хранится состояние приложения.
• Он эффективно управляет всеми состояниями и их обновлениями.
• Приложения Redux имеют только одно хранилище для управления состоянием.

Почему Redux Toolkit лучше Redux?

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

Однако у Redux есть несколько проблем:

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

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

Как использовать Redux Toolkit?

Шаг 1. Установите пакеты

Сначала установите необходимые пакеты, чтобы использовать Redux Toolkit и React-redux в вашем приложении React.

npm install @reduxjs/toolkit

Шаг 2. Создайте редуктор и действия

В традиционном Redux вы можете писать действия и функции редуктора отдельно, как показано ниже:

Actions

const INCREMENT = "INCREMENT";
const DECREMENT = "DECREMENT";
const RESET = "RESET";

Reducer

const intialState = {
count: 0,
};

const counterReducer = (state = intialState, action) => {
switch (action.type) {
case "INCREMENT": {
return {
count: state.count + 1,
};
}
case "DECREMENT": {
return {
count: state.count - 1,
};
}
case "RESET": {
return {
count: 0,
};
}
default:
return state;
}
};

export default counterReducer;

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

Теперь создайте файл counterSlice.js в каталоге src/slice/. Файл counterSlice будет выглядеть так:

counterSlice.js

import { createSlice } from "@reduxjs/toolkit";

export const counterSlice = createSlice({
  name: "counter",
  initialState: {
    count: 0,
  },
  reducers: {
    incrementCount(state) {
      console.log(state.count);
      state.count = state.count + 1;
    },
    decrementCount(state) {
      console.log(state.count);
      state.count = state.count - 1;
    },
    resetCount(state) {
      state.count = 0;
    },
  },
});
export const { incrementCount, decrementCount, resetCount } = counterSlice.actions;

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

Шаг 3. Создайте и инициализируйте хранилище.

Затем создайте файл store.js в каталоге src проекта. В хранилище хранится состояние нашего приложения.

Чтобы создать хранилище, сначала вам следует импортировать configureStore из пакета redux-toolkit.

Здесь createStore в redux заменяется на configureStore. configureStore не только создает хранилище, но также принимает функции редуктора в качестве аргумента и автоматически устанавливает расширение Redux DevTools для отладки.

import { configureStore } from '@reduxjs/toolkit';
import { counterSlice } from "../Test/counterSlice";


export const store = configureStore({
  reducer: {
    count: counterSlice.reducer,
  }
});

Здесь редуктор counterSlice импортируется из counterSlice.js и передается в configureStore.

Шаг 4. Предоставьте хранилище для приложения React.

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

import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import App from "./App";
import store from "./store";
const root = ReactDOM.createRoot(document.getElementById("root"));
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

Шаг 5. Отправка действий из компонента реагирования

Теперь создайте компонент Counter.js в каталоге src. И импортируйте крючки useSelector и useDispatch из реакции-редукса.

• Примечание:

Хук useSelector используется для чтения данных из хранилища, а хук useDispatch используется для отправки или запуска события.

Кроме того, вам необходимо импортировать действия из counterSlice.js, чтобы вызвать событие.

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { incrementCount, decrementCount, resetCount } from "./counterSlice"

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

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

const Counter = () => {
    const count = useSelector((state) => state.count.count);
    const dispatch = useDispatch();
    return (
      <div classname="container"><h3>Counter App Using Redux Toolkit</h3>
        <h1>{count}</h1>
        <div classname="btn-container">
            </div>

                <button onClick={() => dispatch(incrementCount())}>Increment</button>
                <button onClick={() => dispatch(decrementCount())}>Decrement</button>
                <button onClick={() => dispatch(resetCount())}>Reset</button>

            </div>
    );
  };
  export default Counter;

Вот и результат вашего приложения Counter React на базе Redux Toolkit.