dispatch后如何禁用激活状态项？Redux Toolkit自动过期通知实现咨询

Redux 要求 reducer 必须是无副作用的纯函数，不得在 reducer 内部编写 setTimeout、异步请求等逻辑，因此你想在 notify reducer 运行时直接触发 disable 的思路不符合 Redux 设计规范，无法直接实现。

以下是两种生产环境常用的实现方案，可根据你的业务复杂度选择：

方案1：Thunk 实现全局统一过期逻辑（更推荐） #

Redux Toolkit 默认集成 Thunk 中间件，不需要额外安装依赖，所有通知的过期逻辑统一维护，不会出现遗漏配置的情况。

第一步：修正 Slice 现有问题 #

原有代码存在两个隐患：1. 用数组长度作为 ID 不稳定，删除前面的通知后会出现 ID 冲突；2. disable 逻辑用取反操作，可能误将已关闭的通知重新打开，修正后代码如下：

const disableMessage = (state: any, message_id: number) => {
  return state.messages.map((message:any) => message.id === message_id ?
    {...message, active: false} : // 直接设为false，避免取反逻辑问题
    message
  );
}

export const notificationSlice = createSlice({
  name: 'notification',
  initialState: initialState,
  reducers: {
    notify: (state, action) => {
      const { message, mode, active, id } = action.payload;
      state.messages.push({id, message, mode, active});
    },
    disable: (state, action) => {
      const { id } = action.payload;
      state.messages = disableMessage(state, id);
    }
  }
})

export const { notify, disable } = notificationSlice.actions;

第二步：定义带自动过期的 Thunk #

// 可自定义过期时间，默认3秒
export const addNotification = (payload: {message: string, mode: string, timeout?: number}) => (dispatch: AppDispatch) => {
  // 生成唯一ID，避免ID冲突
  const notificationId = Date.now();
  // 触发通知展示
  dispatch(notify({
    ...payload,
    active: true,
    id: notificationId
  }));
  // 延迟指定时间后自动关闭通知
  const delay = payload.timeout ?? 3000;
  setTimeout(() => {
    dispatch(disable({id: notificationId}));
  }, delay);
}

使用方式 #

后续需要弹出通知时，直接 dispatch 这个 Thunk 即可，不需要手动处理过期逻辑：

dispatch(addNotification({message: '操作成功', mode: 'success'}))
// 也可自定义过期时间
dispatch(addNotification({message: '重要提醒', mode: 'warning', timeout: 5000}))

方案2：组件层处理定时器（实现更简单） #

如果你的通知逻辑只在当前组件使用，不想修改 Redux 侧代码，可以直接在 Notification 组件内为每个活跃通知绑定定时器，记得添加清理逻辑避免内存泄漏：

export function Notification() {
  const dispatch = useDispatch();
  const notification_list = useSelector(getNotification);

  function disableAlert(id: number) {
    dispatch(disable({'id' : id}));
  }

  if (!notification_list?.length) return <></>;

  return notification_list.map((notification: any) => {
    // 只给活跃的通知启动自动关闭定时器
    React.useEffect(() => {
      if (notification.active) {
        const timer = setTimeout(() => {
          disableAlert(notification.id);
        }, 3000);
        // 组件卸载/通知状态变化时清理定时器
        return () => clearTimeout(timer);
      }
    }, [notification.active, notification.id, dispatch]);

    return notification.active ? (
      <Alert 
        onClose={() => disableAlert(notification.id)} 
        style={{bottom: 50 * notification.id}} 
        severity={notification.mode}
      >
        {notification.message}
      </Alert>
    ) : null;
  })
}

方案选择建议 #

• 通知需要在项目多个地方触发、希望统一管控过期规则：选方案1
• 通知逻辑简单、仅在当前页面使用：选方案2

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