Redux 是JavaScript 應(yīng)用中用於集中管理狀態(tài)的工具，適用於大型項(xiàng)目組件間通信頻繁、狀態(tài)難以維護(hù)的情況。 1. 提供單一數(shù)據(jù)源，所有狀態(tài)存放在統(tǒng)一Store 中；2. 狀態(tài)只讀，通過Action 描述更新意圖；3. 使用純函數(shù)Reducer 執(zhí)行狀態(tài)變更。實(shí)際開發(fā)中常結(jié)合Redux Toolkit 和React-Redux 簡(jiǎn)化操作，但並非所有項(xiàng)目都需使用，應(yīng)避免濫用全局狀態(tài)和在Reducer 中執(zhí)行副作用。

Redux 是一種用於JavaScript 應(yīng)用的狀態(tài)管理工具，它幫助開發(fā)者更方便地管理和維護(hù)應(yīng)用中的狀態(tài)（state）。你可以把它理解為一個(gè)全局的“倉庫”，用來集中存放整個(gè)應(yīng)用中需要共享的數(shù)據(jù)。

它最初是和React 一起使用的，但現(xiàn)在已經(jīng)被廣泛應(yīng)用於其他框架甚至原生JS 項(xiàng)目中。核心理念是：單一數(shù)據(jù)源、只讀狀態(tài)、通過純函數(shù)更新狀態(tài)。

為什麼需要Redux？

在沒有Redux 的情況下，小型項(xiàng)目可能直接使用組件內(nèi)部的狀態(tài)管理（比如React 的useState 或useReducer），但當(dāng)項(xiàng)目變大、組件之間通信頻繁時(shí)，你會(huì)發(fā)現(xiàn)：

• 狀態(tài)分散在多個(gè)組件中，難以追蹤
• 組件間傳值變得複雜，props 層層傳遞很麻煩
• 同一份數(shù)據(jù)可能被不同組件修改，容易出錯(cuò)

這時(shí)候Redux 就派上用場(chǎng)了。它提供了一個(gè)統(tǒng)一的地方來存放狀態(tài)，並規(guī)定瞭如何讀取和更新這些狀態(tài)，從而讓狀態(tài)變化更加可預(yù)測(cè)和易於調(diào)試。

Redux 的三大核心概念

1. Store

Store 是Redux 中的核心，它是保存整個(gè)應(yīng)用狀態(tài)的對(duì)象。整個(gè)應(yīng)用只能有一個(gè)Store，所有狀態(tài)都存在這裡。你可以把它想像成一個(gè)“大腦”或者“中央數(shù)據(jù)庫”。

• 創(chuàng)建方式通常是createStore(reducer) （雖然現(xiàn)在推薦用Redux Toolkit）
• 可以通過store.getState()獲取當(dāng)前狀態(tài)
• 更新狀態(tài)只能通過store.dispatch(action)發(fā)送動(dòng)作

2. Actions

Action 是一個(gè)描述發(fā)生了什麼的普通對(duì)象。它必須有一個(gè)type字段，表示要執(zhí)行的操作類型，還可以帶一個(gè)payload表示具體的數(shù)據(jù)。

例如：

 { type: 'INCREMENT', payload: 1 }

你可以把它理解為“命令”，告訴Redux 我想做什麼。

3. Reducers

Reducer 是一個(gè)純函數(shù)，接收當(dāng)前狀態(tài)和一個(gè)action，然後返回新的狀態(tài)。它是唯一能真正改變狀態(tài)的地方。

它的結(jié)構(gòu)大致是這樣的：

 function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count action.payload };
    default:
      return state;
  }
}

注意： reducer 必須是純函數(shù)，不能有副作用。

實(shí)際開發(fā)中怎麼用？

在真實(shí)項(xiàng)目中，你通常不會(huì)直接使用原始的Redux API，而是會(huì)結(jié)合一些工具或庫來簡(jiǎn)化操作，比如：

• Redux Toolkit ：官方推薦的方式，內(nèi)置了createAction、createSlice 等功能，大大減少了樣板代碼。
• React-Redux ：用來連接React 組件和Redux store，常用useSelector和useDispatch來獲取狀態(tài)和派發(fā)動(dòng)作。

舉個(gè)簡(jiǎn)單例子：

 import { useSelector, useDispatch } from 'react-redux';
import { increment } from './counterSlice';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => dispatch(increment(1))}> 1</button>
    </div>
  );
}

常見誤區(qū)與建議

• 不是每個(gè)項(xiàng)目都需要Redux ：如果你的應(yīng)用不大，或者狀態(tài)邏輯不復(fù)雜，完全可以先用React 自帶的狀態(tài)管理方案。
• 不要濫用全局狀態(tài)：有些數(shù)據(jù)只需要組件內(nèi)使用，沒必要放進(jìn)Redux，否則會(huì)增加複雜度。
• 保持reducer 純淨(jìng)：不要在裡面做異步操作、調(diào)用API 或者修改參數(shù)。這些應(yīng)該交給middleware，比如Redux-Thunk 或Redux-Saga。
• 合理拆分reducer ：隨著狀態(tài)變多，可以使用combineReducers把不同的reducer 拆分成模塊，便於維護(hù)。

基本上就這些。 Redux 雖然一開始有點(diǎn)抽象，但一旦理解了它的設(shè)計(jì)思路，??你會(huì)發(fā)現(xiàn)它其實(shí)挺直觀的。關(guān)鍵是掌握好什麼時(shí)候該用它，以及怎麼組織狀態(tài)結(jié)構(gòu)和更新邏輯。

以上是什麼是Redux州管理的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！