因此，目前我不得不将请求/ API逻辑直接放入组件中，因为我需要做的是根据从后端获得的响应设置状态。
下面是我在设置页面上的一个函数，我使用它来保存设置，以便在用户点击保存表单后进行反冲：

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);
    }
}

这工作得很完美...我只是不想在我的组件中的功能，因为我的大多数组件都变得比他们需要的更大。
我试过制作一个单独的文件来做这件事，但我只能在组件内部使用反冲钩（在这个例子中是useSetRecoilState），当我试着在React组件外部做这件事时，它只是抱怨。
我试过用反冲函数selector和selectorFamily来实现这个功能，但它变得有点复杂。下面是我在一个只有atoms /selector的文件中的尝试：

export const languageProgress = atom<LanguageProgress>({
    key: "LanguageProgress",
    default: {
        level: 1,
        xp: 0,
        max_xp: 0
    }
})

export const languageProgressUpdate = selectorFamily<LanguageProgress>({
    key: "LanguageProgress",
    get: () => async () => {
        try {
            const { data: { data } } = await getLanguageProgress();

            return data;
        } catch (error) {
            console.log('get language progress error');
        }
    },
    set: (params:object) => async ({set}) => {
        try {
            const { data: { data } } = await updateLanguageProgress(params);

            set(languageProgress, {
                level: data.level,
                xp: data.xp,
                max_xp: data.max_xp
            });
        } catch (error) {
            console.log('language progress update error: ', error);
        }
    }
});

这里我想做的是从后端获取所需的值，并将其显示在前端，这可以在选择器函数get中实现，但现在我有两点正确...我的languageProgress原子最初是不正确的，因为它没有从数据库中获取任何内容，所以我必须在我创建的languageProgressUpdate选择器上使用useGetRevoilValue，但当我想要更新时，我更新原子而不是实际值。
我在任何地方都找不到一个很好的例子来做我在这里试图做的事情（非常令人惊讶的是，我认为这是一种非常常见的方法...从后端获取数据并将其设置为状态。）如果不在组件中执行此操作，我无法找到执行此操作的方法（如第一个例子）。理想情况下，我希望像第一个例子一样，但不在组件之内，因为这个解决方案超级简单，对我很有效。