使用useReducer更新状态后，如何更优雅地执行后续操作？

方案1：封装带回调的自定义dispatch函数 #

这是最接近类组件this.setState使用体验的方式，把计算nextState和回调的逻辑封装成可复用函数，避免重复代码：

import { useReducer, useCallback } from 'react';

// 封装带回调的useReducer
function useReducerWithCallback(reducer, initialState) {
  const [state, dispatch] = useReducer(reducer, initialState);
  
  const dispatchWithCallback = useCallback((action, callback) => {
    // 提前计算下一个状态
    const nextState = reducer(state, action);
    // 触发状态更新
    dispatch(action);
    // 执行回调并传入新状态
    if (callback) callback(nextState);
  }, [state, reducer]);

  return [state, dispatchWithCallback];
}

// 使用示例
function YourComponent() {
  const [state, dispatch] = useReducerWithCallback(yourReducer, initialState);

  const handleUpdate = () => {
    const action = { type: 'updateData', data: 'newdata' };
    dispatch(action, (nextState) => {
      saveData(nextState);
      somethingElse(nextState.somekey);
    });
  };

  // ...组件其他逻辑
}

这个方案把重复计算nextState的逻辑封装起来，每次调用只需传入action和回调函数，和类组件的写法几乎一致。

方案2：用useEffect结合加载标记监听状态变化 #

如果不想封装自定义hook，可以用useEffect监听目标状态，同时通过ref标记跳过首次渲染：

import { useReducer, useEffect, useRef } from 'react';

function YourComponent() {
  const [state, dispatch] = useReducer(yourReducer, initialState);
  const isFirstRender = useRef(true);

  // 监听需要触发副作用的状态字段（比如state.data或者整个state）
  useEffect(() => {
    // 跳过初始渲染
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return;
    }

    // 状态更新后执行后续操作
    saveData(state);
    somethingElse(state.somekey);
  }, [state.data]); // 这里可以指定具体变化的字段，避免不必要的触发

  const handleUpdate = () => {
    dispatch({ type: 'updateData', data: 'newdata' });
  };

  // ...组件其他逻辑
}

注意依赖项要精准，比如如果只关心state.data的变化，就把state.data作为依赖，而不是整个state，这样能减少不必要的副作用触发。

方案3：整合副作用到状态更新函数中 #

如果你的副作用和状态更新强绑定，可以创建一个专门处理状态更新+副作用的函数，把逻辑内聚：

function YourComponent() {
  const [state, dispatch] = useReducer(yourReducer, initialState);

  // 封装状态更新+副作用的函数
  const updateDataAndDoActions = (newData) => {
    const action = { type: 'updateData', data: newData };
    const nextState = yourReducer(state, action);
    dispatch(action);
    saveData(nextState);
    somethingElse(nextState.somekey);
  };

  // 使用时直接调用这个封装函数
  const handleUpdate = () => {
    updateDataAndDoActions('newdata');
  };

  // ...组件其他逻辑
}

这种方式适合特定场景下的状态更新，把相关逻辑封装在一起，代码更清晰。

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