掌握 Redux 基礎：React 狀態管理完整指南

Redux 基礎：帶有程式碼範例的詳細解釋

Redux 是一個狀態管理函式庫，廣泛用於 JavaScript 應用程序，尤其是 React。它為應用程式的狀態提供了集中存儲，使管理和調試變得更加容易，尤其是在大型複雜的應用程式中。 Redux 遵循單向資料流，並確保狀態變更以可預測的方式發生，從而更容易理解您的應用程式的工作原理。

讓我們一步步分解 Redux 基礎知識，用程式碼範例解釋每個概念。

---

1.什麼是 Redux？

Redux 是 JavaScript 應用程式的可預測狀態容器。它可以幫助您集中管理應用程式的狀態，從而更輕鬆地調試和擴展。

Redux 核心原則：

• 單一事實來源：應用程式的整個狀態儲存在單一物件中（store），使其易於追蹤和操作。
• 狀態是唯讀的：改變狀態的唯一方法是調度操作。
• 使用純函數進行更改：狀態由reducers修改，它們是指定狀態如何響應操作而變化的純函數。

---

2. Redux 的核心概念

Redux 依賴以下關​​鍵組件：

1.行動

action 是一個普通的 JavaScript 對象，它描述應用程式中發生的事件或操作。每個操作都必須有一個 type 屬性，它描述正在執行的操作。

動作範例：

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

• 在這裡，增量和減量是動作創作者。它們傳回帶有類型欄位的操作物件。 type 屬性告訴 Redux 如何處理減速器中的操作。

---

2.減速機

A reducer 是一個純函數，它接受目前狀態和一個操作，然後傳回一個新狀態。減速器是指定狀態應如何改變以響應操作的函數。它們應該是純函數，這意味著它們不會修改原始狀態，而是傳回一個新的狀態物件。

減速器範例：

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

• 在上面的例子中：
  • 初始狀態定義為計數0。
  • reducer 監聽 INCREMENT 和 DECRMENT 操作並相應地更新計數狀態。
  • return { ...state, count: state.count 1 } 行建立一個新物件來保持不變性並更新狀態。

---

3.商店

store 保存著應用程式的整個狀態。儲存是使用 Redux 中的 createStore 方法建立的，它是應用程式狀態所在的位置。該商店還提供了調度操作和訂閱狀態變更的方法。

商店範例：

// reducer.js
const initialState = {
  count: 0
};

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

export default counterReducer;

• store是透過將counterReducer傳遞給createStore來建立的。
• 現在，應用程式的狀態由 Redux 管理，狀態的任何變更都將通過減速器。

---

3.連接 Redux 和 React

React 元件需要與 Redux 儲存互動以取得狀態和調度操作。 React-Redux 是一個獨立的函式庫，用於連接 React 和 Redux。它提供了諸如 useSelector 之類的鉤子來存取儲存的狀態和 useDispatch 來調度操作。

將 Redux 與 React 連接的步驟：

1. 使用 React-redux 中的 Provider 元件包裝您的應用程式，將儲存空間傳遞給您的所有元件。
2. 使用 useSelector 存取狀態。
3. 使用 useDispatch 調度修改狀態的操作。

---

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

讓我們逐步完成將 Redux 與簡單的 React 應用程式連接的完整設定。

---

第 1 步：安裝 Redux 和 React-Redux

首先，你需要安裝 Redux 和 React-Redux：

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

---

第 2 步：建立操作

在 Redux 中，操作是純 JavaScript 對象，用於描述您想要對狀態進行的變更。

npm install redux react-redux

• 遞增和遞減函數是傳回動作物件的動作創建者。
• 操作物件有一個描述操作的類型欄位。

---

第3步：建立一個Reducer

reducer 是一個接受當前狀態和操作並傳回新狀態的函數。

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

• reducer 監聽 INCREMENT 和 DECRMENT 操作並相應地更新狀態。

---

第 4 步：建立商店

商店是國家居住的地方。它是使用 Redux 中的 createStore 方法建立的。

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

• 我們將 counterReducer 傳遞給 createStore 以建立一個儲存來管理我們應用程式的狀態。

---

第 5 步：將 Redux 與 React 連接

現在，讓我們使用 Provider、useDispatch 和 useSelector 掛鉤將 Redux 連接到我們的 React 應用程式。

// reducer.js
const initialState = {
  count: 0
};

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

export default counterReducer;

• Provider：包裝整個應用程序，將 Redux 儲存傳遞給所有元件。
• useSelector：從 Redux 儲存中檢索目前狀態（計數）。
• useDispatch：允許您調度操作（遞增和遞減）。

---

5. Redux 工具包（選購）

為了讓 Redux 更容易使用，Redux Toolkit 透過減少樣板程式碼來簡化設定。它提供了 createSlice 和 configureStore 等實用程式來處理常見任務，例如建立減速器和設定儲存。

使用 Redux 工具包的範例：

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

• createSlice 函數會自動為您產生動作建立器和縮減器。
• configureStore 簡化了商店設定。

---

6.使用 Redux 的最佳實務

• 保留 Redux 的全域狀態：使用 Redux 管理應用程式範圍的狀態（例如，使用者驗證、設定）。
• 對簡單元件使用本機狀態：對於較小的狀態需求（例如表單輸入），請使用 React 的 useState 而不是 Redux。
• 避免直接突變：更新狀態時始終傳回一個新物件以確保不變性。

---

7.結論

Redux 是一個用於管理 React 應用程式中全域狀態的強大工具。透過了解操作、減速器和存儲，您可以以可預測的方式管理複雜的狀態。使用 Redux Toolkit 可以進一步簡化這個過程。如果正確使用，Redux 可以使大型應用程式更易於管理、調試和擴展。

有了這些知識，您現在就可以將 Redux 合併到您的 React 應用程式中，確保整個應用程式更有效率的狀態管理。

---

以上是掌握 Redux 基礎：React 狀態管理完整指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！