理解 Redux：深入了解其內部運作原理-js教程-PHP中文網

理解 Redux：深入了解其內部運作原理

PHPz

發布： 2024-08-22 18:45:33

原創

238 人瀏覽過

Understanding Redux: A Deep Dive into Its Inner Workings

什麼是 Redux？

Redux 是 JavaScript 應用程式的可預測狀態容器。它可以幫助您在不同的環境中以一致的方式管理應用程式的狀態，無論它是在客戶端、伺服器甚至本機環境中運行。 Redux 基於這樣的理念：應用程式的整個狀態應該在單一事實來源中進行管理：商店。

Redux 的關鍵概念

要了解 Redux 的工作原理，我們來分解其核心概念：

Store：商店是應用程式狀態的中央儲存庫。它保存應用程式的整個狀態樹。 Redux 應用程式中只有一個 store。
Actions：動作是純 JavaScript 對象，表示更改狀態的意圖。它們必須具有指示正在執行的操作類型的類型屬性。或者，它們還可以包含附加數據，稱為有效負載，提供有關操作的更多資訊。
Reducers：Reducers 是純函數，它將當前狀態和操作作為參數並傳回新狀態。它們指定應用程式的狀態如何響應操作而變化。由於減速器是純函數，因此它們不會改變現有狀態，而是傳回一個新的狀態物件。
Dispatch：dispatch函數用於將action傳送到store。分派操作時，儲存會運作減速器以根據目前狀態和操作計算新狀態。
選擇器：選擇器是從儲存中擷取並傳回特定狀態片段的函數。它們有助於封裝存取狀態的邏輯，使您的程式碼更加模組化且更易於測試。

Redux 的工作原理：逐步流程

要了解 Redux 的工作原理，讓我們來看看 Redux 支援的應用程式中狀態變更的典型流程。

調度操作：當應用程式中發生某些事情（例如，使用者點擊按鈕）時，就會調度一個操作。這個動作是一個簡單的對象，描述發生了什麼，通常包含一個類型和一些有效負載。
```
const incrementAction = {
  type: 'INCREMENT',
  payload: 1
};

store.dispatch(incrementAction);
```
登入後複製

Reducer 處理 Action：store 將分派的 Action 和目前狀態傳送給Reducer。然後，reducer 根據操作類型決定應如何更新狀態。

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

登入後複製

Store 更新 State：reducer 傳回一個新的狀態對象，該物件取代 Store 中的舊狀態。然後，儲存會通知所有訂閱的元件狀態變更。
元件重新渲染：任何訂閱狀態更新的元件都會重新渲染以反映新狀態。
```
function mapStateToProps(state) {
  return {
    count: state.count
  };
}
```
登入後複製

Redux 中的中介軟體

Redux 中的中間件可讓您使用自訂功能擴充 Redux。中間件可以在操作到達減速器之前攔截操作，並且可以執行日誌記錄、錯誤報告或發出非同步請求等任務。

最受歡迎的中間件之一是 redux-thunk，它允許您編寫返回函數而不是操作的操作創建器。這對於處理 Redux 中的非同步操作特別有用。

const incrementAsync = () => (dispatch) => {
  setTimeout(() => {
    dispatch({ type: 'INCREMENT', payload: 1 });
  }, 1000);
};

store.dispatch(incrementAsync());

登入後複製