如何在超时情况下调度 Redux 操作？-js教程-PHP中文网

如何在超时情况下调度 Redux 操作？

Linda Hamilton

发布： 2024-12-06 20:10:17

原创

627 人浏览过

How to Dispatch Redux Actions with Timeouts?

使用超时调度 Redux 操作

问题

假设您有一个 Redux 应用程序来管理通知、显示错误或信息警报等消息。您希望在一定时间（例如 5 秒）后自动关闭这些通知。

解决方案：内联异步代码

最简单的方法是直接使用 setTimeout：

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);
}

登录后复制

然后在组件中使用：

showNotificationWithTimeout(this.props.dispatch, 'You just logged in.');

登录后复制

解决方案：使用 Thunk 中间件

Thunk 中间件提供了更大的灵活性。它使您能够调度返回操作的函数：

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

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

登录后复制

然后您可以直接调度 thunk 操作创建者：

this.props.dispatch(showNotificationWithTimeout('You just logged in.'));

登录后复制

Thunk 中的阅读状态

Thunk 也是允许您读取当前状态store:

export function showNotificationWithTimeout(text) {
  return function (dispatch, getState) {
    if (!getState().areNotificationsEnabled) {
      return;
    }

    // ...
  };
}

登录后复制