Как использовать React Redux — «Легче, чем съесть крендель»

Давайте кратко рассмотрим, как мы можем использовать Redux в приложении React. Использование Redux немного отличается от использования vanilla Redux непосредственно в приложении JS. Чтобы Redux работал с React, нам нужно добавить определенные библиотеки, которые будут работать как адаптер между ванильной библиотекой Redux и React. Также мы можем использовать React Hooks для использования или изменения контекста, хранящегося в Redux.

Более новая версия Redux предоставляет нам очень мощную библиотеку Toolkit, позволяющую создавать срезы. Мы можем использовать Redux с React, используя 3 библиотеки:

редукс | реакция-редукс | @reduxjs/инструментарий

Давайте напишем базовый код для использования Redux с приложением React UI.

Шаг 1: Первый шаг — создать слайсы. Каждый слайс состоит из имени, начального объекта контекста для хранилища и функций редуктора для управления хранилищем.

Давайте создадим Slice в файле с именем counterSlice.js.

// We will use toolkit to create Slice
import {createSlice} from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: {count:0}
  reducers:{
    increment: state => { state.count += 1; } //looks like store is mutable
    decrement: state => { state.count -= 1; } //actually its not!! see below
    incrementBy: (state,action) => { state.count += action.payload; }
    decrementBy: (state,action) => { state.count -= action.payload; }
  }
});

export default counterSlice;

Шаг 2: Следующим шагом является создание магазина. Давайте сделаем это в файле store.js. Аналогичным образом мы можем добавить несколько фрагментов в хранилище.

// We will use toolkit to configure Store
import {configureStore} from "@reduxjs/toolkit";
import counterSlice from "./counterSlice";

const store = configureStore({
  reducer: {
            counter: counterSlice.reducers
            }
});

export default store;

Шаг 3: Далее мы импортируем Provider и привяжем к нему наш магазин: Давайте сделаем это в нашем index.js.

// We will use "react-redux" to use <Provider> tag
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"));
root.render(
  <Provider store={store} >
    <App />
  </Provider>
);

Шаг 4: Получите доступ к хранилищу из компонентов и попробуйте манипулировать. Давайте попробуем это из App.js

// We will use "react" for useSelector and useDispatch Hooks!
import {useSelector, useDispatch} from "react";
import counterSlice from "./counterSlice.js";

const App = () => {
  const count = useSelector(state => { state.counter.count }); //subscribe!
  const dispatch = useDispatch();
  const {increment,decrement,increamentBy} = CounterSlice.reducers;
  
  return (
          <div>
            <h1>Counter: {counter} </h1>
            <button onClick={() => dispatch(increment()) }>INC</button>
            <button onClick={() => dispatch(decrement()) }>DEC</button>
            <button onClick={() => dispatch(incrementBy()) }>INC_BY</button>
            <button onClick={() => dispatch(decrementBy()) }>DEC_BY</button>
          </div>
         );
}

Я надеюсь, что фрагменты кода были в значительной степени понятными.

Еще немного вещей!

На шаге 1 мы видим, что получаем доступ к текущему состоянию нашего состояния и изменяем его state => { state.count += 1; } , но за сценой этот код будет преобразован в промежуточный код, который будет манипулировать состоянием неизменным образом. Насколько мне известно, инструментарий делает это за кулисами.

Кроме того, фрагменты кода показывают, как создать отдельный фрагмент и добавить его в хранилище. Мы можем создать несколько фрагментов и предоставить их на верхний уровень дерева компонентов и получить только необходимый фрагмент хранилища. Попробуйте создать несколько и получить к ним доступ через компоненты. Должно быть выполнимо.

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

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

Вот и все люди. дайте мне знать, если нужна коррекция. Спасибо!

Как использовать React Redux — «Легче, чем съесть крендель»

Похожие вопросы