為什麼在 Redux 中使用中間件進行非同步操作？

為什麼我們需要 Redux 中的非同步流中間件？

乍一看，Redux 不支援非同步資料流，因為它指定了「Redux 儲存體僅支援同步資料流。」然而，事實並非如此。

在給定的範例中，容器元件當然可以呼叫非同步 API 並隨後分派必要的操作。事實上，這種方法可以正常工作，點擊按鈕時欄位的更新就證明了這一點。

這個策略有什麼問題嗎？

主要關注點出現在較大的應用程式中，其中許多元件可能執行相同的操作，或者可能需要合併諸如去抖之類的功能。此外，對於自動遞增 ID 之類的任務，保留動作創建者附近的本地狀態可能是有益的。

從維護的角度來看，它簡化了將動作創建者分成不同功能的問題，從而簡化了動作創建者的開發和維護程式碼庫。

雖然像Redux Thunk 或Redux Promise 這樣的中間件透過語法糖提供了程式碼簡化，但對於

沒有中間件：

在沒有中間件的情況下，action 建立者可以直接執行非同步操作，如下所示：

function loadData(dispatch, userId) {
  fetch(`http://data.com/${userId}`)
    .then(res => res.json())
    .then(
      data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }),
      err => dispatch({ type: 'LOAD_DATA_FAILURE', err })
    );
}

// in component
componentWillMount() {
  loadData(this.props.dispatch, this.props.userId); // pass dispatch as argument for async action creator
}

用Thunk中間件：

Redux Thunk 提供了更簡潔的語法來分派非同步操作：

function loadData(userId) {
  return dispatch =>
    fetch(`http://data.com/${userId}`)
      .then(res => res.json())
      .then(
        data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }),
        err => dispatch({ type: 'LOAD_DATA_FAILURE', err })
      );
}

// in component
componentWillMount() {
  this.props.dispatch(loadData(this.props.userId)); // dispatch as usual
}

中間件的好處：

主要使用Redux Thunk等中間件的優點在於將元件與操作創建者實作細節解耦。元件仍然不知道動作創建者是同步還是非同步，以及它是否與 Redux 狀態或其他動作創作者互動。

中間件的替代品：

Redux Thunk 是不是 Redux 應用程式中處理非同步請求的唯一方法。另一個引人注目的替代方案是 Redux Saga，它可以定義長期運行的“sagas”，這些“sagas”對傳入操作進行操作，在產生進一步操作之前轉換或執行請求。

以上是為什麼在 Redux 中使用中間件進行非同步操作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！