使用React useReducer更新复杂状态时，API调用的最佳实践与方案探讨

我在使用React的useReducer管理需多条件更新的复杂状态，希望在状态更新时将变更记录到数据库，但useReducer需为纯函数，不能在其中放置API调用。我考虑使用useEffect，但不想重复reducer中的逻辑。

我的状态子集如下：

users: [{
    name: "Bob", 
    accounts: [
      {type: "Savings", balance: 24},
      {type: "Credit",  balance: 15}],
    address: "34 Rosendale Avenue"
  },
  // ...
]

我的reducer子集如下：

function reducer(oldState, action) {
  let state = structuredClone(oldState);
  switch (action.type) {
    case "bonus_added":
      state.users.forEach((user) => {
        user.accounts.forEach((account) => {
          if (account.type === "Savings") {
            account.balance += 10;
            // Would like to also make API call here to log this change
          }
        });
      });
      return state;
    default:
      throw Error("Unknown action.");
  }
}

此外，我发现可以用useState模拟useReducer的用法：

const [state, dispatch] = useReducer(reducer, initState);

类似写法如下：

const [state, setState] = useState(initState);
const dispatch = (action) => setState(reducer(state, action));

由于useState相关函数无需保持纯函数，我可以在这种写法的reducer中加入API调用，请问该方案是否合理？

你提到的用useState模拟useReducer并在reducer里加API调用的方案不合理，原因如下：

• 破坏纯函数特性：reducer的核心职责是根据旧状态和action计算新状态，加入API调用会让它变成带副作用的函数，违反函数式编程的设计原则，导致状态逻辑和副作用耦合，后期调试和维护难度陡增。
• 数据不一致风险：setState是异步更新，在reducer里调用API时，新状态还未同步到组件，若API依赖新状态数据，很可能出现数据不匹配的问题。
• 重复执行隐患：组件重新渲染时dispatch会被重新创建，若触发逻辑处理不当，容易导致API被重复调用。

推荐的两种正确做法 #

1. 在自定义dispatch中处理副作用

保持reducer的纯函数特性，把API调用放在dispatch函数里，状态更新和副作用执行逻辑分离：

const [state, setState] = useState(initState);
const dispatch = (action) => {
  // 先通过纯reducer计算新状态
  const newState = reducer(state, action);
  
  // 根据action类型执行对应API调用
  if (action.type === "bonus_added") {
    // 提取需要记录的变更数据
    const bonusLogs = newState.users.flatMap(user => 
      user.accounts
        .filter(account => account.type === "Savings")
        .map(account => ({
          userName: user.name,
          accountType: account.type,
          newBalance: account.balance
        }))
    );
    // 调用日志接口
    fetch('/api/record-bonus', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(bonusLogs)
    });
  }
  
  // 最后更新状态
  setState(newState);
};

2. 抽离复用逻辑，结合useEffect监听状态

把reducer中计算变更的逻辑抽成独立纯函数，在reducer和useEffect中复用，避免重复代码：

// 抽离纯函数：计算储蓄账户的奖金变更数据
function getBonusChanges(oldUsers) {
  return oldUsers.map(user => ({
    userName: user.name,
    updatedAccounts: user.accounts
      .filter(acc => acc.type === "Savings")
      .map(acc => ({
        oldBalance: acc.balance,
        newBalance: acc.balance + 10
      }))
  })).filter(item => item.updatedAccounts.length > 0);
}

// 纯reducer：只负责状态更新
function reducer(oldState, action) {
  const state = structuredClone(oldState);
  switch (action.type) {
    case "bonus_added":
      // 复用变更计算逻辑（这里仅用于状态更新，也可以直接更新，逻辑一致）
      state.users.forEach(user => {
        user.accounts.forEach(acc => {
          if (acc.type === "Savings") acc.balance += 10;
        });
      });
      return state;
    default:
      throw new Error("Unknown action.");
  }
}

// 组件中使用useEffect监听状态变化，执行API调用
const [state, dispatch] = useReducer(reducer, initState);
const prevUsersRef = useRef(state.users);

useEffect(() => {
  // 对比新旧状态，获取变更数据
  const changes = getBonusChanges(prevUsersRef.current);
  if (changes.length > 0) {
    fetch('/api/record-bonus', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(changes)
    });
  }
  // 更新上一次状态的引用
  prevUsersRef.current = state.users;
}, [state.users]);

这两种方式都能有效避免重复逻辑，同时保证代码的可维护性和状态一致性。

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