如何在useReducer更新状态后调用API且不破坏reducer纯函数特性？

因为reducer必须是纯函数，不能包含API调用这类副作用操作，我们可以通过以下几种方式在状态更新后安全地调用API：

方法一：使用useEffect监听状态变化 #

利用useEffect钩子监听目标状态的变化，当状态更新时自动触发API调用。这种方式适合需要状态变更后自动同步数据的场景，还能方便处理加载、错误状态。

首先扩展reducer，支持加载和错误状态的更新：

import { useReducer, useEffect } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'incremented_age':
      return {
        ...state,
        age: state.age + 1,
        error: null
      };
    case 'set_loading':
      return { ...state, loading: action.payload };
    case 'set_error':
      return { ...state, loading: false, error: action.payload };
    case 'rollback_age':
      return { ...state, age: state.age - 1, loading: false, error: null };
    default:
      throw Error('Unknown action.');
  }
}

// 模拟API调用
async function updateAgeAPI(newAge) {
  // 这里替换为真实的API请求
  const response = await fetch('/api/update-age', {
    method: 'POST',
    body: JSON.stringify({ age: newAge })
  });
  if (!response.ok) throw new Error('更新失败');
  return response.json();
}

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, { 
    age: 42, 
    loading: false, 
    error: null 
  });

  // 监听age变化，触发API更新
  useEffect(() => {
    // 初始渲染时不调用API（可选，根据需求调整）
    if (state.age === 42) return;

    const syncAgeToDB = async () => {
      dispatch({ type: 'set_loading', payload: true });
      try {
        await updateAgeAPI(state.age);
        dispatch({ type: 'set_loading', payload: false });
      } catch (err) {
        dispatch({ type: 'set_error', payload: err.message });
        // API失败时回滚状态
        dispatch({ type: 'rollback_age' });
      }
    };

    syncAgeToDB();
  }, [state.age]); // 依赖项为state.age，变化时触发

  return (
    <>
      <button 
        onClick={() => dispatch({ type: 'incremented_age' })}
        disabled={state.loading}
      >
        {state.loading ? '更新中...' : 'Increment age'}
      </button>
      {state.error && <p style={{ color: 'red' }}>{state.error}</p>}
      <p>Hello! You are {state.age}.</p>
    </>
  );
}

方法二：在dispatch后直接调用API #

如果是用户操作触发的状态变更（比如点击按钮），可以在触发dispatch的事件处理函数中，先更新状态，紧接着调用API。这种方式逻辑更直观，适合简单场景。

修改按钮的点击逻辑：

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, { 
    age: 42, 
    loading: false, 
    error: null 
  });

  const handleIncrement = async () => {
    // 先更新本地状态
    dispatch({ type: 'incremented_age' });
    dispatch({ type: 'set_loading', payload: true });

    try {
      await updateAgeAPI(state.age + 1); // 因为dispatch是同步的，这里可以直接用新值
      dispatch({ type: 'set_loading', payload: false });
    } catch (err) {
      dispatch({ type: 'set_error', payload: err.message });
      // 回滚状态
      dispatch({ type: 'rollback_age' });
    }
  };

  return (
    <>
      <button onClick={handleIncrement} disabled={state.loading}>
        {state.loading ? '更新中...' : 'Increment age'}
      </button>
      {state.error && <p style={{ color: 'red' }}>{state.error}</p>}
      <p>Hello! You are {state.age}.</p>
    </>
  );
}

方法三：封装带副作用的自定义dispatch（复杂场景） #

对于复杂业务逻辑，可以封装一个自定义的dispatchWithSideEffect函数，把状态更新和API调用的逻辑封装在一起，避免重复代码，同时保持reducer的纯净性：

import { useReducer, useCallback } from 'react';

// ...reducer和updateAgeAPI定义同上

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, { 
    age: 42, 
    loading: false, 
    error: null 
  });

  // 封装带副作用的dispatch
  const dispatchWithSideEffect = useCallback(async (action) => {
    // 先执行状态更新
    dispatch(action);

    // 根据action类型判断是否需要调用API
    if (action.type === 'incremented_age') {
      dispatch({ type: 'set_loading', payload: true });
      try {
        await updateAgeAPI(state.age + 1);
        dispatch({ type: 'set_loading', payload: false });
      } catch (err) {
        dispatch({ type: 'set_error', payload: err.message });
        dispatch({ type: 'rollback_age' });
      }
    }
  }, [state.age]);

  return (
    <>
      <button 
        onClick={() => dispatchWithSideEffect({ type: 'incremented_age' })}
        disabled={state.loading}
      >
        {state.loading ? '更新中...' : 'Increment age'}
      </button>
      {state.error && <p style={{ color: 'red' }}>{state.error}</p>}
      <p>Hello! You are {state.age}.</p>
    </>
  );
}

关键注意事项 #

• 始终处理API调用的错误状态，必要时回滚本地状态，避免前后端数据不一致；
• 添加加载状态，防止用户重复操作；
• 如果使用useEffect，注意依赖项的设置，避免不必要的重复调用（可结合useRef或防抖函数优化）；
• 若项目使用Redux而非useReducer，可以使用Redux Thunk、Saga等中间件处理异步逻辑，但useReducer场景下以上方法足够覆盖大部分需求。

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