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

Оглавление

1. Введение в Redux
2. Настройка Redux в приложении React
3. Действия и типы действий
4. Редукторы и срезы
5. Настройка магазина
6. Соединение компонентов React
7. Выводы и ссылки

1. Введение в Redux

Redux следует модели однонаправленного потока данных и основан на трех основных принципах:

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

2. Настройка Redux в приложении React

Сначала установите Redux и React-Redux:

npm install redux react-redux @reduxjs/toolkit

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

3. Действия и типы действий

Действия — это полезные данные, которые отправляют данные из вашего приложения в ваш магазин Redux. Типы действий — это константы, представляющие действие.

actionTypes.js

export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
export const INCREMENT_BY_VALUE = "INCREMENT_BY_VALUE";
export const RESET = "RESET";

export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });
export const incrementByValue = (value) => ({
  type: INCREMENT_BY_VALUE,
  payload: value,
});
export const reset = () => ({ type: RESET });

Четкое определение действий и типов действий помогает поддерживать согласованность и снижает количество ошибок в вашем приложении.

4. Редукторы и срезы

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

counterSlice.js

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

const initialState = { number: 0 };

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.number  = 5;
    },
    decrement: (state) => {
      state.number = Math.max(0, state.number - 5);
    },
    incrementByValue: (state, action) => {
      state.number  = action.payload;
    },
    reset: (state) => {
      state.number = 0;
    },
  },
});

export const { increment, decrement, incrementByValue, reset } = counterSlice.actions;

export default counterSlice.reducer;

Чтобы объединить несколько фрагментов:

rootReducer.js

import { combineReducers } from "@reduxjs/toolkit";
import counterReducer from "../slices/counterSlice";

const rootReducer = combineReducers({
  counter: counterReducer,
});

export default rootReducer;

5. Настройка магазина

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

store.js

import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "../reducers/rootReducer";

const store = configureStore({
  reducer: rootReducer,
});

export default store;

6. Соединение компонентов React

Чтобы подключить компоненты React к хранилищу Redux, используйте компонент Provider из реакции-redux, чтобы передать хранилище вашим компонентам, и используйте перехватчики useSelector и useDispatch для доступа к состоянию и управления им.

Приложение.js

import React from "react";
import { Provider } from "react-redux";
import store from "./redux/store/store";
import Counter from "./components/Counter";
import MusCo from "./MusCo redux logo.png";

function App() {
  return (
    

        

          Practice Redux with MusCo
        
        

          

            by 
            Mustafa 
            Coskuncelebi
          
        
      
    
  );
}

export default App;

CounterComponent.js

import { useDispatch, useSelector } from "react-redux";
import {
  decrement,
  increment,
  incrementByValue,
  reset,
} from "../slices/counterSlice";
import { useState, useEffect } from "react";

function Counter() {
  const [value, setValue] = useState("");
  const dispatch = useDispatch();
  const number = useSelector((state) => state.counter.number);

  useEffect(() => {
    const showcase = document.querySelector("#showcase");
    if (number 
      
Counter
      
{number}
      

         dispatch(increment())} className="w-40 h-10 p-2 mt-5 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={{ backgroundColor: "#c2ff72" }}>
          Increment by 5
        
         dispatch(decrement())} className="w-40 h-10 p-2 mt-5 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={number 
          Decrement by 5
        
      
      

        

           {
                   let newValue = e.target.value.trim();
                   if (newValue === "") {
                     newValue = "";
                     reset();
                   }
                   if (/^\d*$/.test(newValue)) {
                     setValue(newValue);
                   }
                 }} 
                 value={value} 
                 placeholder="Enter Value" />
           {
            dispatch(incrementByValue(Number(value)));
            setValue("");
          }} className="w-40 h-10 p-2 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={{ backgroundColor: "#c2ff72" }}>
            Add this Value
          
        
      
       {
        dispatch(reset());
        setValue("");
      }} className="w-20 h-10 p-2 text-white rounded-md outline-1 outline-violet-500

 outline mb-7 bg-violet-900">
        Reset
      
      

        Counter cannot be less than 0
      
    
  );
}

export default Counter;

7. Заключение и ссылки.

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

Ключевые моменты:

• Действия: определите, что должно произойти в вашем приложении.
• Редукторы: укажите, как изменяется состояние в ответ на действия.
• Хранилище: сохраняет состояние и обрабатывает действия.
• Поставщик: передает хранилище вашим компонентам React.

Для получения дополнительной информации ознакомьтесь с официальной документацией Redux:

• Документация Redux
• Документация по Redux Toolkit
• Документация React-Redux

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