如何調度一個超時的 Redux Action？

如何透過超時發送 Redux action？

問題：

我需要使用超時機制來更新應用程式的通知狀態。通知通常是一些錯誤或訊息。我需要在 5 秒後發送另一個 action，將通知狀態傳回為初始狀態，以便不顯示通知。主要原因是為了提供一項功能，讓通知在 5 秒後自動消失。

我曾經嘗試使用 setTimeout 並返回另一個 action，但沒有成功，也沒有在網路上找到相關方法。無論什麼建議我都願意嘗試。

回答：

不必侷限於將所有運算都寫進函式庫的思維慣式。如果你想在 JavaScript 中使用超時機制，直接使用 setTimeout 即可。 Redux action 也同樣適用這原理。

Redux 確實提供了處理非同步事件的替代方案，但是只有當你發現重複的程式碼過多時，才應該使用這些方案。除非你遇到這類問題，否則請直接使用該語言提供的方案，追求最簡單的解決方案。

內嵌寫非同步程式碼

這是最簡單的方法。這裡並未使用任何 Redux 特有的方法。

store.dispatch({ type: 'SHOW_NOTIFICATION', text: 'You logged in.' })
setTimeout(() => {
  store.dispatch({ type: 'HIDE_NOTIFICATION' })
}, 5000)

連接組件中也是相同操作：

this.props.dispatch({ type: 'SHOW_NOTIFICATION', text: 'You logged in.' })
setTimeout(() => {
  this.props.dispatch({ type: 'HIDE_NOTIFICATION' })
}, 5000)

唯一不同的是，在連接組件中通常無法存取store 本身，而是透過注入props 來取得dispatch() 或特定操作創建器。但對我們而言，這沒有區別。

如果你不想在不同組件中發送相同的action 時出現拼寫錯誤，可以提取操作創建器，而不是內聯發送action 對象：

// actions.js
export function showNotification(text) {
  return { type: 'SHOW_NOTIFICATION', text }
}
export function hideNotification() {
  return { type: 'HIDE_NOTIFICATION' }
}

// component.js
import { showNotification, hideNotification } from '../actions'

this.props.dispatch(showNotification('You just logged in.'))
setTimeout(() => {
  this.props.dispatch(hideNotification())
}, 5000)

或者，如果你之前已透過connect() 綁定它們：

this.props.showNotification('You just logged in.')
setTimeout(() => {
  this.props.hideNotification()
}, 5000)

到目前為止，我們還沒有使用任何中間件或其他高級概念。

提取非同步操作創建器

上述方法在簡單情況下運作良好，但是你可能會發現它存在一些問題：

• 它迫使你在要顯示通知的任何位置複製這段邏輯。
• 如果速度夠快，顯示兩個通知，則這些通知將沒有 ID，因此會出現競爭條件。當第一個逾時結束時，它會錯誤地派發 HIDE_NOTIFICATION，過早地隱藏第二個通知。

為了解決這些問題，你需要提取一個函數，集中超時邏輯並派發這兩個操作。如下所示：

// actions.js
function showNotification(id, text) {
  return { type: 'SHOW_NOTIFICATION', id, text }
}
function hideNotification(id) {
  return { type: 'HIDE_NOTIFICATION', id }
}

let nextNotificationId = 0
export function showNotificationWithTimeout(dispatch, text) {
  // 为通知分配 ID，这样 reducer 就可以忽略不当前可见通知的 HIDE_NOTIFICATION。
  // 或者，我们可以存储超时 ID 并调用 clearTimeout()，但是我们仍然需要在一个地方执行此操作。
  const id = nextNotificationId++
  dispatch(showNotification(id, text))

  setTimeout(() => {
    dispatch(hideNotification(id))
  }, 5000)
}

現在，元件可以使用showNotificationWithTimeout 顯示通知，無需重複此邏輯或使用不同通知出現競爭條件：

// component.js
showNotificationWithTimeout(this.props.dispatch, 'You just logged in.')

// otherComponent.js
showNotificationWithTimeout(this.props.dispatch, 'You just logged out.')    

showNotificationWithTimeout() 為什麼接受dispatch 作為dispatch 作為第一個參數？因為它需要向 store 發送操作。元件通常可以存取 dispatch，但是由於我們希望外部函數控制發送操作，因此我們需要將其控制權交給它。

如果你已經從某個模組導出了一個單一store，則可以導入它並直接在其中進行發送操作：

store.dispatch({ type: 'SHOW_NOTIFICATION', text: 'You logged in.' })
setTimeout(() => {
  store.dispatch({ type: 'HIDE_NOTIFICATION' })
}, 5000)

看起來更簡單，但我們不推薦此方法。我們不喜歡它的主要原因是 它強制要求 store 成為單例。這使得實現伺服器端渲染非常困難。在伺服器端，你希望每個請求都有自己的 store，以便讓不同的使用者獲得不同的預先載入資料。

單一 store 也讓測驗更加困難。當你在測試操作建立器時，你無法再模擬一個 store，因為它們引用的是從特定模組匯出的特定 real store。你甚至不能從外部重置其狀態。

因此，雖然你可以從技術上從模組中導出一個單一 store，但我們不建議這麼做。除非你確定你的應用程式永遠不會添加伺服器端渲染，否則不要這樣做。

回到上一個版本：

this.props.dispatch({ type: 'SHOW_NOTIFICATION', text: 'You logged in.' })
setTimeout(() => {
  this.props.dispatch({ type: 'HIDE_NOTIFICATION' })
}, 5000)

這解決了重複邏輯的問題，避免了競爭條件。

Thunk 中間件

對於簡單的應用，上述方法就足夠了。如果你對此感到滿意，不必擔心中間件。

然而，在較大的應用中，你可能會發現其中存在某些不便。

例如，將 dispatch 傳遞來傳遞去似乎很不幸。這使得將容器組件和表現層組件分離變得更加困難，因為任何按上述方式非同步發送 Redux 操作的組件都必須接受 dispatch 作為 props，以便可以進一步傳遞它。你不能再使用 connect() 綁定操作創建器是因為 showNotificationWithTimeout() 並不是真正意義上的操作創建器。它不會傳回 Redux 操作。

此外，記住哪些函數是同步操作建立器（例如 showNotification()），哪些函數是非同步輔助函數（例如 showNotificationWithTimeout()），可能會很麻煩。你必須以不同的方式使用它們，並且小心不要將它們相互混淆。

這是我們找到一種方法來「合法化」將這種模式提供給輔助函數並幫助Redux 將此類非同步操作創建器「視為」正常操作創建器的特殊情況而不是完全不同的函數的動機。

如果你仍然堅持，並且也認為你自己的應用中存在這個問題，歡迎使用 Redux Thunk 中間件。

簡單來說，Redux Thunk 教會Redux 識別實際上是函數的特殊類型的操作：

// actions.js
export function showNotification(text) {
  return { type: 'SHOW_NOTIFICATION', text }
}
export function hideNotification() {
  return { type: 'HIDE_NOTIFICATION' }
}

// component.js
import { showNotification, hideNotification } from '../actions'

this.props.dispatch(showNotification('You just logged in.'))
setTimeout(() => {
  this.props.dispatch(hideNotification())
}, 5000)

當啟用此中間件時，如果你發送一個函數，Redux Thunk 中間件會將dispatch 作為參數傳遞給它。它還會「吞掉」此類動作，所以不必擔心你的 reducers 會收到奇怪的函數參數。你的 reducers 只會收到常規物件操作——直接發送的操作，或者如我們剛剛描述的那樣，由函數發送的操作。

看起來沒什麼用，不是嗎？在這個特定情況下不是。但它允許我們將 showNotificationWithTimeout() 宣告為一個常規的 Redux 操作建立器：

this.props.showNotification('You just logged in.')
setTimeout(() => {
  this.props.hideNotification()
}, 5000)

以上是如何調度一個超時的 Redux Action？的詳細內容。更多資訊請關注PHP中文網其他相關文章！