Redux 中介軟體的實現原理

最小生成树發表於2024-08-16
Redux

Redux 中介軟體的實現原理主要基於函數語言程式設計思想和高階函式。中介軟體用於在 Redux 的 dispatch 過程之間插入自定義邏輯，如日誌記錄、非同步操作、除錯工具等。

1. 什麼是 Redux 中介軟體？

  • 簡要介紹 Redux 中介軟體的概念和用途。
  • 解釋中介軟體如何在 dispatch 動作和到達 reducer 之間插入邏輯。

2. 中介軟體的使用場景

  • 記錄日誌：列印每次狀態變化前後的資料。
  • 處理非同步操作：如 Redux Thunk 用於處理非同步 action。
  • 跟蹤除錯：整合除錯工具，如 Redux DevTools。

3. Redux 中介軟體的工作流程

  • 解釋中介軟體在 Redux 流程中的位置：action → middleware → reducer → store。
  • 中介軟體如何以鏈式呼叫的方式串聯。

4. 中介軟體的實現原理

  • 核心思想：中介軟體本質上是一個函式，接受 store 的 dispatch 和 getState，並返回一個封裝後的 dispatch 函式。
  • 高階函式：中介軟體通常以函式的形式實現 (store) => (next) => (action)，逐層巢狀。
  • 程式碼示例：
  • const loggerMiddleware = store => next => action => {
  console.log('dispatching', action);
  let result = next(action);
  console.log('next state', store.getState());
  return result;
};

5. Redux 中介軟體的應用

  • 如何編寫和應用自定義中介軟體。
  • 使用 applyMiddleware 函式將中介軟體應用到 Redux store 中：
import { createStore, applyMiddleware } from 'redux';
import loggerMiddleware from './middlewares/logger';
const store = createStore(
  rootReducer,
  applyMiddleware(loggerMiddleware)
);

6. 中介軟體的執行順序

  • 解釋多箇中介軟體的執行順序是從左到右，鏈式呼叫。
  • 說明如何透過控制中介軟體順序來影響行為。

7. Redux 中的非同步中介軟體

  • 介紹 Redux Thunk 和 Redux Saga。
  • 解釋如何處理非同步操作，尤其是在複雜的非同步場景中，如何透過中介軟體管理 side effects。

8. Redux 中介軟體的擴充套件

  • 中介軟體組合：如何將多箇中介軟體組合以實現更強大的功能。
  • 中介軟體的侷限性和最佳實踐。

組合多箇中介軟體的示例

假設我們有兩個中介軟體，一個是用於記錄日誌的 loggerMiddleware，另一個是處理非同步操作的 thunkMiddleware。

1. 定義兩個中介軟體：

// 日誌中介軟體，記錄每次 dispatch 的 action 和更新後的 state
const loggerMiddleware = store => next => action => {
  console.log('dispatching:', action);
  let result = next(action);
  console.log('next state:', store.getState());
  return result;
};

// 非同步中介軟體，用於處理函式型別的 action
const thunkMiddleware = store => next => action => {
  if (typeof action === 'function') {
    // 如果 action 是一個函式，呼叫它並傳遞 dispatch 和 getState
    return action(store.dispatch, store.getState);
  }
  // 如果 action 不是函式，直接傳遞給下一個中介軟體
  return next(action);
};

2. 使用 applyMiddleware 組合中介軟體：

import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';

// 將多箇中介軟體組合
const store = createStore(
  rootReducer,
  applyMiddleware(loggerMiddleware, thunkMiddleware)
);

在這個例子中，applyMiddleware 將 loggerMiddleware 和 thunkMiddleware 組合在一起。Redux 的 dispatch 流程會按順序經過這兩個中介軟體：

  1. 當一個 action 被 dispatch 時，它首先會經過 loggerMiddleware。
  2. 然後它會經過 thunkMiddleware，如果這個 action 是一個函式（例如非同步操作的處理函式），thunkMiddleware 會直接執行它。
  3. 最後，經過所有中介軟體後，action 才會到達 reducer 並更新狀態。

3. 中介軟體的執行順序：

在上面的示例中，中介軟體的執行順序是 loggerMiddleware → thunkMiddleware。這個順序是按照傳遞給 applyMiddleware 的順序執行的。可以透過調整順序來實現不同的功能組合效果。

4. 完整示例：

import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';

// 日誌中介軟體
const loggerMiddleware = store => next => action => {
  console.log('dispatching:', action);
  let result = next(action);
  console.log('next state:', store.getState());
  return result;
};

// 非同步中介軟體
const thunkMiddleware = store => next => action => {
  if (typeof action === 'function') {
    return action(store.dispatch, store.getState);
  }
  return next(action);
};

// 組合中介軟體
const store = createStore(
  rootReducer,
  applyMiddleware(loggerMiddleware, thunkMiddleware)
);

// 非同步 action 示例
const fetchData = () => {
  return (dispatch, getState) => {
    dispatch({ type: 'FETCH_START' });
    setTimeout(() => {
      dispatch({ type: 'FETCH_SUCCESS', payload: 'data received' });
    }, 2000);
  };
};

// 觸發非同步 action
store.dispatch(fetchData());

關鍵點總結

  • 多箇中介軟體可以使用 applyMiddleware 串聯組合，依次處理 dispatch 的 action。
  • 中介軟體的執行順序由 applyMiddleware 中的順序決定。
  • 中介軟體可以在 dispatch 前或後執行自定義邏輯，適合處理非同步操作、日誌記錄、錯誤處理等。

相關文章