React中在useState/useReducer纯函数内执行副作用的替代方案

你当前的核心矛盾是需要把状态更新同步到外部缓存，但不能在要求纯函数的setter回调、reducer内部执行副作用，以下是3种可落地的方案，按推荐优先级排序：

方案1：useEffect监听状态变化自动同步（最符合React范式） #

把缓存更新逻辑完全移到useEffect中，依赖对应状态，状态变更后自动触发缓存更新，完全不侵入纯函数逻辑。

示例（useState场景） #

const currentUser = useContext(CurrentUserContext);

// 仅在当前用户数据变化时同步到缓存
useEffect(() => {
  const userId = currentUser.data?.id;
  if (!userId) return;
  // 直接全量同步最新状态到缓存，不用手动计算变更字段
  usersCache.update(userId, currentUser.data);
}, [currentUser.data]);

// 原状态 setter 保持纯函数，无任何副作用
currentUser.setData((prevData) => {
  const newTotalFollowing = prevData.totalFollowing + 1;
  return { ...prevData, totalFollowing: newTotalFollowing };
});

示例（useReducer场景） #

const [otherUsers, dispatch] = useReducer(otherUsersReducer, initialState);

// 监听用户列表状态变化同步缓存
useEffect(() => {
  for (const [userId, userData] of otherUsers.entries()) {
    usersCache.update(userId, userData);
  }
}, [otherUsers]);

// reducer 保持纯函数，移除缓存更新逻辑
export default (otherUsers, action) => {   
  switch (action.type) {
    case "follow-user": {
      const { userId, isFollowing } = action.payload;
      const prevUserData = otherUsers.get(userId);
      const newTotalFollowers = prevUserData.totalFollowers + (isFollowing ? 1 : -1);
      return new Map([
        ...otherUsers,
        [
          userId,
          { ...prevUserData, totalFollowers: newTotalFollowers }
        ]
      ]);
    }
    default: return otherUsers;
  }
}

如果担心全量遍历性能差，可以在reducer返回新状态的同时，把本次变更的用户ID存在ref中，useEffect中仅同步变更的单个用户即可。

方案2：封装操作钩子，状态更新与缓存更新绑定 #

把修改状态、更新缓存的逻辑封装到自定义Hook的原子方法中，上层业务无需关心同步逻辑，也不会破坏纯函数规则。

示例 #

// 封装用户关注操作的自定义Hook
function useUserFollowActions() {
  const currentUser = useContext(CurrentUserContext);
  const [otherUsers, dispatch] = useReducer(otherUsersReducer, initialState);

  const follow = (targetUserId) => {
    // 1. 更新当前用户关注数
    currentUser.setData(prev => ({
      ...prev,
      totalFollowing: prev.totalFollowing + 1
    }));
    // 2. 更新目标用户粉丝数
    dispatch({
      type: "follow-user",
      payload: { userId: targetUserId, isFollowing: true }
    });
    // 3. 同步更新两个缓存条目
    usersCache.update(currentUser.data.id, {
      totalFollowing: currentUser.data.totalFollowing + 1
    });
    const targetUser = otherUsers.get(targetUserId);
    usersCache.update(targetUserId, {
      totalFollowers: targetUser.totalFollowers + 1
    });
  };

  return { follow };
}

上层组件直接调用follow方法即可，无需单独处理缓存同步。

方案3：在dispatch/setter的同级作用域执行缓存更新 #

如果不想加额外的useEffect，也可以把缓存更新逻辑放到触发状态更新的同一个事件回调/异步函数中，和dispatch、setState放在同一层级，不要侵入纯函数内部。

示例 #

// 组件内的关注按钮点击回调
const handleFollowClick = async (targetUserId) => {
  // 先执行接口请求等逻辑
  await followApi(targetUserId);
  // 更新状态
  currentUser.setData(prev => ({
    ...prev,
    totalFollowing: prev.totalFollowing + 1
  }));
  dispatch({ type: "follow-user", payload: { userId: targetUserId, isFollowing: true } });
  // 同步更新缓存，完全在回调作用域内执行，不侵入纯函数
  usersCache.update(currentUser.data.id, {
    totalFollowing: currentUser.data.totalFollowing + 1
  });
  const targetUser = otherUsers.get(targetUserId);
  usersCache.update(targetUserId, {
    totalFollowers: targetUser.totalFollowers + 1
  });
};

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