首頁 > 文章 > web前端 > Master Redux：React 開發者簡單指南

Master Redux：React 開發者簡單指南

王林原創: 2024-07-20 16:33:02290瀏覽

Master Redux: A Simple Guide for React Developers

Redux 被廣泛認為是專為 JavaScript 應用程式設計的強大狀態管理庫，通常與流行的框架 React 一起使用。透過提供可靠的狀態容器，Redux 建立了堅實的基礎，大大簡化了應用程式狀態的處理和故障排除任務。在本指南中，我們將深入研究構成 Redux 的基本元件，提供每個元素的詳細解釋，並說明它們如何協同互通以簡化應用程式的整體功能。這次深入的探索旨在闡明 Redux 的內部工作原理，使開發人員能夠掌握這個狀態管理工具的複雜性，並在他們的專案中有效地利用其功能。

1.Redux簡介

Redux 遵循單向資料流模型，並基於三個核心原則：

單一事實來源：整個應用程式的狀態儲存在單一儲存中的物件樹中。這種集中化使得調試和追蹤應用程式中的變更變得更加容易。

狀態是唯讀的：改變狀態的唯一方法是發出一個動作，一個描述發生了什麼的物件。這確保了狀態突變是可預測和可追蹤的。

使用純函數進行變更：要指定狀態樹如何透過操作轉換，您可以編寫純減速器。純函數是可預測和可測試的，這簡化了調試和單元測試。

2. 在 React 應用程式中設定 Redux

首先，安裝 Redux 和 React-Redux：

npm install redux react-redux @reduxjs/toolkit

此指令安裝核心 Redux 函式庫、Redux 的 React 綁定以及 Redux Toolkit，這簡化了許多常見任務，例如設定儲存和建立切片。

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. 減速器和切片

Reducer 指定應用程式的狀態如何變更以回應傳送至儲存的操作。切片是應用程式單一功能的 Redux 減速機邏輯和操作的集合，使用 Redux Toolkit 的 createSlice 方法建立。

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. 配置商店

store是將actions和reducers結合在一起的物件。它保存應用程式狀態，允許透過 getState() 存取它，透過dispatch(action) 更新它，並透過 subscribe(listener) 註冊監聽器。

store.js

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

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

export default store;

6. 連接 React 元件

要將 React 元件連接到 Redux 存儲，請使用 react-redux 中的 Provider 元件將儲存傳遞給您的元件，並使用 useSelector 和 useDispatch 鉤子來存取和操作狀態。

App.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 Master Redux：React 開發者簡單指南.png";

function App() {
  return (
    <provider store="{store}">
      <div classname="container mx-auto mt-24 text-center">
        <img src="%7BMusCo%7D" alt="Master Redux：React 開發者簡單指南" classname="w-40 mx-auto mt-24 rounded-full">
        <h1 classname="container m-auto text-2xl 
            font-semibold text-center text-violet-700">
          Practice Redux with 
            <span classname="font-extrabold 
            text-violet-900">MusCo</span>
        </h1>
        <div classname="relative inline-block mt-8 text-sm">
          <counter></counter>
          <h5 classname="absolute bottom-0 right-0 mb-2 
                mr-2 font-semibold text-violet-700">
            <span classname="italic font-normal">by</span> 
            <span classname="font-semibold text-violet-900">Mus</span>tafa <span classname="font-semibold 
                text-violet-900">Co</span>skuncelebi
          </h5>
        </div>
      </div>
    </provider>
  );
}

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 
      <h1 classname="mb-3 text-3xl font-bold mt-7 
        text-violet-700">Counter</h1>
      <p classname="text-5xl text-violet-900">{number}</p>
      <div classname="flex mx-8 space-x-5" style="{{" justifycontent:>
        <button onclick="{()"> 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
        </button>
        <button onclick="{()"> 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
        </button>
      </div>
      <div classname="flex mx-8 mt-5 space-x-3 mb-7" style="{{" justifycontent: alignitems:>
        <div classname="p-5 space-x-5 rounded-md outline 
            outline-1 outline-violet-500">
          <input classname="w-40 h-10 pl-2 rounded-md outline 
                outline-1 outline-violet-500 text-violet-900" onchange="{(e)"> {
            let newValue = e.target.value.trim();
            if (newValue === "") {
              newValue = "";
              reset();
            }
            // Check the trimmed value consists only of digits
            if (/^\d*$/.test(newValue)) {
              setValue(newValue);
            }
          }} value={value} placeholder="Enter Value" />
          <button onclick="{()"> {
            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
          </button>
        </div>
      </div>
      <button onclick="{()"> {
        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
      </button>
      <h3 classname="text-violet-400" id="showcase" style="{{" visibility: marginbottom:>
        Counter cannot be less than 0
      </h3>
    
  );
}

export default Counter;

7 結論與參考文獻

Redux 是一個強大的函式庫，用於管理應用程式中的狀態。透過了解操作、減速器、儲存以及如何將所有內容連接到 React 元件，您可以建立可預測和可維護的應用程式。

重點：

操作：定義應用程式中應該發生的事情。

Reducers：指定狀態如何回應操作而變化。

Store：儲存狀態並處理操作。

Provider：將儲存傳遞給你的 React 元件。

專案文件：

在這裡您可以存取我的 GitHub 儲存庫中儲存的專案檔案。
redux-counter

更多信息，請查看 Redux 官方文檔：

Redux 文件

Redux 工具包文件

React-Redux 文件

透過遵循本指南，您應該對 Redux 有深入的了解，並能夠在自己的應用程式中實現它。

編碼愉快！

發佈在hashnode和medium

以上是Master Redux：React 開發者簡單指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript npm Object define for using Collection JS this table github everything Access Foundation

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：保護 JWT 令牌免受令牌偽造和資料操縱攻擊下一篇：保護 JWT 令牌免受令牌偽造和資料操縱攻擊

看更多