React useReducer最佳实践：在reducer中触发Toast是否可行？

问题描述 #

我正在使用toast-react和useReducer Hook开发通知组件，考虑在reducer方法中触发通知，想了解该方式是否存在问题或副作用。这是我首次使用React的useReducer() Hook，不清楚其最佳实践及reducer中不应包含的内容。我查阅的教程均仅在reducer中处理状态，因此疑惑是否适合在其中注入非状态操作逻辑。

当前代码如下：

const renderToast = (props) => { /* logic to switch toast type...*/}    

export function toastReducer(
      state: ToastState,
      action: ToastActions,
    ) {
      switch (action.type) {
        case ToastActionType.DisplayToast:
          renderToast(action.payload); // <- is there a better way of doing this? is this the right place to inject this?
          return {
            ...state,
            ...action.payload,
          };
       
        default:
          return state;
      }
    }

后续我考虑制作一个监听状态值的组件包装器，代码如下：

const ToastComponent = () => {
  const  displayToast = (toastState) => {
    switch(toastState.toastType){
      case toastType.Error:
        toastError(toastState.message, 1000)
        break;
      case toastType.Success:
        toastError(toastState.message, 1000)
        break;
      default:
        break;
    }
  }
  
  useEffect(()=>{
    displayToast()
  }, [displayToast]);

  return (
    <ToastProvider value={toastState}>
      <ToastContainer />
    </ToastProvider>
  )
}

希望能得到相关建议。

核心建议 #

1. 绝对不要在reducer里执行副作用操作 #

你第一个方案里在reducer中调用renderToast是错误做法，违反了useReducer的核心原则：

• reducer必须是纯函数：相同输入必须返回相同输出，不能包含任何副作用（触发UI渲染、调用异步函数、修改外部变量等）
• reducer的唯一职责是根据action计算新状态，它不应该直接和UI交互，也不能触发改变应用外部环境的操作
• 这种写法会让状态更新和UI操作耦合，不仅难以调试测试，还可能引发不可预测的渲染问题

2. 你的第二个思路正确，但需修正细节 #

监听状态变化触发Toast显示符合React范式，但代码存在几个问题：

• useEffect依赖displayToast会导致每次组件渲染都重新执行effect（函数引用每次都会变化），建议把displayToast移到effect内部，或用useCallback包裹
• displayToast调用时未传入toastState参数，会直接报错
• Success类型错误调用了toastError，应改为toastSuccess

优化后的代码示例：

const ToastComponent = () => {
  const { toastState, dispatch } = useContext(ToastContext); // 假设用Context管理状态

  useEffect(() => {
    if (!toastState.message) return; // 避免空消息触发

    switch(toastState.toastType){
      case toastType.Error:
        toastError(toastState.message, 1000);
        break;
      case toastType.Success:
        toastSuccess(toastState.message, 1000);
        break;
      default:
        break;
    }
  }, [toastState]); // 依赖toastState，仅状态变化时执行

  return (
    <ToastProvider value={{ toastState, dispatch }}>
      <ToastContainer />
    </ToastProvider>
  )
}

3. 更优雅的解耦实现方案 #

推荐把Toast显示逻辑和状态管理完全分离：

• reducer只负责维护Toast状态（消息内容、类型、可见性等）
• 单独写一个Toast处理组件，订阅状态变化自动处理显示/隐藏逻辑
• 若不需要持久化Toast状态，也可直接在dispatch action的地方调用toast-react API，跳过状态监听

示例：

// 状态管理部分
export function toastReducer(state: ToastState, action: ToastActions) {
  switch (action.type) {
    case ToastActionType.DisplayToast:
      return {
        ...state,
        ...action.payload,
        isVisible: true
      };
    case ToastActionType.HideToast:
      return {
        ...state,
        isVisible: false
      };
    default:
      return state;
  }
}

// Toast处理组件（无需渲染DOM）
const ToastHandler = () => {
  const { toastState, dispatch } = useContext(ToastContext);

  useEffect(() => {
    if (!toastState.isVisible) return;

    // 根据类型调用对应toast API
    const toastFn = toastState.toastType === toastType.Error ? toastError : toastSuccess;
    const toastId = toastFn(toastState.message, {
      duration: 1000,
      onClose: () => dispatch({ type: ToastActionType.HideToast })
    });

    // 组件卸载时清除Toast
    return () => toast.dismiss(toastId);
  }, [toastState, dispatch]);

  return null;
}

// 全局使用
const App = () => {
  const [toastState, dispatch] = useReducer(toastReducer, initialState);

  return (
    <ToastProvider value={{ toastState, dispatch }}>
      <ToastContainer />
      <ToastHandler />
      {/* 其他业务组件 */}
    </ToastProvider>
  )
}

4. useReducer最佳实践总结 #

• 保持reducer的纯函数特性，仅负责状态计算
• 副作用操作（API调用、UI交互、定时器等）放在组件的useEffect、事件处理函数中，复杂场景可自行实现简易中间件
• 状态与UI逻辑分离，让reducer专注状态管理，组件专注UI渲染和交互
• 复杂状态逻辑适合用useReducer，简单状态直接用useState即可

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