如何通过try/finally结合setTimeout返回两种不同字符串状态？

你的核心问题在于Redux reducer必须是纯函数，不能包含异步操作（比如setTimeout），而且你在finally里直接修改state的方式完全无效——当setTimeout的回调执行时，reducer早就执行完毕，这种修改不会触发Redux的状态更新。另外try/finally在这里也没有实际作用，因为你的逻辑里没有可能抛出错误的代码。

要实现“先显示通知，5秒后清空”的需求，正确的做法是把异步逻辑放到thunk action creator里，分两次dispatch同步action来更新状态。

步骤一：修改Notification Slice #

先在slice里定义两个同步reducer：一个负责设置通知，一个负责清空通知：

import { createSlice } from "@reduxjs/toolkit";

const notificationSlice = createSlice({
  name: 'notification',
  initialState: '',
  reducers: {
    setNotification: (state, action) => {
      return `You voted for ${action.payload}`;
    },
    clearNotification: () => {
      return '';
    }
  }
});

export const { setNotification, clearNotification } = notificationSlice.actions;
export default notificationSlice.reducer;

步骤二：创建带异步逻辑的Thunk Action #

Redux Toolkit默认集成了thunk中间件，我们可以写一个返回函数的action creator，在里面处理setTimeout逻辑：

// 可以和slice放在同一个文件，或者单独的thunks文件中
let notificationTimerId;

export const createNotification = (content) => {
  return (dispatch) => {
    // 清除之前的定时器，避免多次触发时定时器冲突
    if (notificationTimerId) {
      clearTimeout(notificationTimerId);
    }
    
    dispatch(setNotification(content));
    notificationTimerId = setTimeout(() => {
      dispatch(clearNotification());
    }, 5000);
  };
};

步骤三：在组件中使用 #

在需要触发通知的组件里，直接dispatch这个thunk即可：

import { useDispatch } from 'react-redux';
import { createNotification } from './path/to/notificationSlice';

// 比如在投票函数里
const handleVote = (item) => {
  const dispatch = useDispatch();
  dispatch(createNotification(item));
  // 其他投票逻辑...
};

为什么这样可行？ #

1. Thunk允许我们编写包含异步逻辑的action，它返回的函数可以拿到dispatch方法，用来分两次触发同步action更新状态。
2. 所有状态更新都是通过Redux的标准流程完成的，确保状态变更可追踪、可预测。
3. 加入了定时器清理逻辑，避免用户连续操作时出现多个通知叠加或延迟清空的问题。

内容的提问来源于stack exchange，提问作者SupraCoder