如何在超时后调度 Redux Action？-js教程-PHP中文网

如何在超时后调度 Redux Action？

Patricia Arquette

发布： 2024-12-01 05:08:15

原创

843 人浏览过

How to Dispatch a Redux Action After a Timeout?

在超时情况下分派 Redux 操作

使用 Redux 时，处理异步事件（例如在指定延迟后分派操作）对于显示通知、计时器非常有用，以及其他时间敏感的功能。

使用 setTimeout 和 Callback函数

最简单的方法是使用内置的 JavaScript 函数 setTimeout 和回调函数。

store.dispatch({ type: 'SHOW_NOTIFICATION', message: 'Success!' });

setTimeout(() => {
 store.dispatch({ type: 'HIDE_NOTIFICATION' });
}, 5000); // Set a timeout of 5 seconds

登录后复制

使用 Thunk 中间件（推荐）

Redux Thunk 中间件允许您可以调度按顺序返回其他操作的函数。这可以实现异步操作并更好地控制副作用。

使用 npm 安装中间件：

npm install --save redux-thunk

登录后复制

在 Redux 存储配置中：

import thunk from 'redux-thunk';

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

登录后复制

定义一个 thunk接受调度函数作为参数的动作创建者：

export const showNotificationWithTimeout = (message) => (dispatch) => {
  const id = uniqueID();

  dispatch({ type: 'SHOW_NOTIFICATION', id, message });

  setTimeout(() => {
    dispatch({ type: 'HIDE_NOTIFICATION', id });
  }, 5000);
};

登录后复制

调度thunk:

store.dispatch(showNotificationWithTimeout('Success!'));

登录后复制

在 Thunk 中读取状态

Thunk 操作创建者可以使用 Redux Thunk 提供的 getState 函数访问存储的当前状态。这允许根据状态有条件地执行操作：

export const showNotificationWithTimeout = (message) => (dispatch, getState) => {
  const enabled = getState().settings.notificationsEnabled;

  if (enabled) {
    const id = uniqueID();
    dispatch({ type: 'SHOW_NOTIFICATION', id, message });

    setTimeout(() => {
      dispatch({ type: 'HIDE_NOTIFICATION', id });
    }, 5000);
  }
};

登录后复制