如何實現定時 Redux 操作？

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

在 Redux 中，你可以使用 setTimeout 並調度另一個 Action 來返回通知狀態經過一定時間後恢復到初始狀態。這樣，通知會在指定的時間間隔後自動消失。

使用內聯 JavaScript

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

擷取非同步操作建立器

如果您使用內聯方法遇到程式碼重複或競爭條件，請考慮提取非同步操作

function showNotificationWithTimeout(dispatch, text) {
  const id = nextNotificationId++;
  dispatch(showNotification(id, text));

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

使用Thunk 中間件

對於複雜的應用程序，您可能需要使用Redux Thunk 中間件。它允許 Redux 將函數識別為動作創建者，並提供對這些函數內的調度和 getState 的存取。

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const store = createStore(
  reducer,
  applyMiddleware(thunk)
);

store.dispatch(showNotificationWithTimeout('You logged in.'));

在 Thunk 中讀取狀態

在 thunk 動作建立者中，您可以使用 getState 來讀取儲存的目前狀態。這對於根據當前狀態有條件地調度操作很有幫助。

showNotificationWithTimeout(dispatch, getState) {
  if (!getState().areNotificationsEnabled) {
    return;
  }
  // ... continue with action-dispatching logic
}

請記住僅在必要時使用這些技術，因為簡單的內聯 JavaScript 可能足以滿足許多場景。

以上是如何實現定時 Redux 操作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！