在 Redux 中优雅地处理异步超时操作

2024-03-11 00:17:06

在 Redux 中调度带有超时操作的行为

引言

在 React 应用程序中使用 Redux 进行状态管理时，我们经常需要在特定的时间延迟后执行某些操作。例如，我们需要在 5 秒后自动隐藏通知。虽然使用 setTimeout 和返回另一个动作可以实现这一点，但这可能并不直观。本文将介绍使用 Redux Thunk 中间件的替代方案，它允许我们在动作中使用异步函数，从而可以延迟调度动作并返回多个动作。

Redux Thunk 中间件

Redux Thunk 是一个流行的中间件，允许我们在动作中使用异步函数。它使我们能够延迟调度动作，并在需要时返回多个动作。

创建异步动作创建器

为了使用 Redux Thunk，我们需要安装并配置它。安装完成后，我们可以使用 createAsyncThunk 方法创建异步动作创建器。

import { createAsyncThunk } from '@reduxjs/toolkit';

export const hideNotification = createAsyncThunk(
  'notification/hide',
  async () => {
    // 等待 5 秒
    await new Promise((resolve) => setTimeout(resolve, 5000));

    // 返回一个动作对象，将通知状态重置为初始值
    return { type: 'notification/reset' };
  }
);

调度异步动作

现在，我们可以调度 hideNotification 异步动作：

import { useDispatch } from 'react-redux';

const MyComponent = () => {
  const dispatch = useDispatch();

  // 当通知可见时调度 hideNotification 动作
  useEffect(() => {
    if (isNotificationVisible) {
      dispatch(hideNotification());
    }
  }, [isNotificationVisible]);

  // ...
};