如何实现定时 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中文网其他相关文章！