使用Recoil时如何将API/异步请求逻辑与React组件分离

1. 自定义React Hooks（最简洁直接） #

把API请求和Recoil状态更新逻辑封装成自定义Hook，既保持逻辑独立，又能合法使用Recoil钩子。

创建hooks/useUserSettings.ts：

import { useSetRecoilState } from 'recoil';
import { userAtoms } from '../path/to/atoms';
import { updateUser } from '../path/to/api';
import type { UserConfigInterface } from '../path/to/types';

export const useUserSettings = () => {
  const setUserConfig = useSetRecoilState(userAtoms.userConfig);

  const submitSettings = async (values: UserConfigInterface) => {
    try {
      const { data: { data } } = await updateUser(values);
      setUserConfig({ ...data });
    } catch (error) {
      console.log('settings form error: ', error);
      // 可添加全局错误提示，比如Toast
    }
  };

  return { submitSettings };
};

组件内使用：

import { useUserSettings } from '../hooks/useUserSettings';

const SettingsPage = () => {
  const { submitSettings } = useUserSettings();

  const handleSubmit = (values) => {
    submitSettings(values);
  };

  return (
    // 表单组件
  );
};

该方案完全复用原有逻辑，仅做抽离，保持组件简洁且符合React Hook规则。

2. 用useRecoilCallback封装跨场景更新逻辑 #

如果需要在多组件或非组件环境（如事件监听、工具函数）调用状态更新，可使用useRecoilCallback封装逻辑。

创建utils/recoilUpdaters.ts：

import { useRecoilCallback, RecoilState } from 'recoil';
import { updateUser } from '../path/to/api';
import type { UserConfigInterface } from '../path/to/types';

export const createUserSettingsUpdater = (userConfigAtom: RecoilState<any>) => {
  return useRecoilCallback(({ set }) => async (values: UserConfigInterface) => {
    try {
      const { data: { data } } = await updateUser(values);
      set(userConfigAtom, { ...data });
    } catch (error) {
      console.log('settings form error: ', error);
    }
  }, [userConfigAtom]);
};

组件内使用：

import { createUserSettingsUpdater } from '../utils/recoilUpdaters';
import { userAtoms } from '../path/to/atoms';

const SettingsPage = () => {
  const submitSettings = createUserSettingsUpdater(userAtoms.userConfig);

  const handleSubmit = (values) => {
    submitSettings(values);
  };

  return (/* 表单组件 */);
};

3. 修复SelectorFamily的双数据源问题 #

针对之前的Selector方案，可将原子默认值设置为异步Selector，让原子初始化时自动拉取后端数据，消除双数据源不一致问题。

import { atom, selector } from 'recoil';
import { getLanguageProgress, updateLanguageProgress } from '../path/to/api';
import type { LanguageProgress } from '../path/to/types';

// 异步Selector：拉取后端初始数据
const languageProgressDefault = selector<LanguageProgress>({
  key: 'LanguageProgressDefault',
  get: async () => {
    try {
      const { data: { data } } = await getLanguageProgress();
      return data;
    } catch (error) {
      console.log('get language progress error');
      return { level: 1, xp: 0, max_xp: 0 };
    }
  },
});

export const languageProgress = atom<LanguageProgress>({
  key: 'LanguageProgress',
  default: languageProgressDefault, // 用异步Selector作为原子默认值
});

// 封装更新逻辑的SelectorFamily
export const updateLanguageProgressSelector = selectorFamily({
  key: 'UpdateLanguageProgressSelector',
  set: (params: any) => async ({ set }) => {
    try {
      const { data: { data } } = await updateLanguageProgress(params);
      set(languageProgress, data); // 直接更新原子，保持数据一致性
    } catch (error) {
      console.log('language progress update error: ', error);
    }
  },
});

组件内使用：

import { useRecoilState, useSetRecoilState } from 'recoil';
import { languageProgress, updateLanguageProgressSelector } from '../path/to/atoms';

const ProgressPage = () => {
  const [progress] = useRecoilState(languageProgress); // 自动拉取后端初始数据
  const updateProgress = useSetRecoilState(updateLanguageProgressSelector({}));

  const handleUpdate = () => {
    updateProgress({ level: progress.level + 1 });
  };

  return (
    <div>
      <p>Level: {progress.level}</p>
      <button onClick={handleUpdate}>升级</button>
    </div>
  );
};

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