React中Recoil.js如何在组件外部更新atom（状态）？

方案1：封装自定义Hook（推荐） #

这是最符合React Hooks设计规范的实现方式，不需要额外处理边界问题，适配所有场景。
你可以把登录、登出逻辑统一封装在一个自定义Hook中，内部调用Recoil的hooks获取状态更新方法：

// hooks/useAuth.ts
import { useRecoilState } from 'recoil';
import { signedInUserSelector } from '你定义selector的文件路径';

export function useAuthActions() {
  const [, setUser] = useRecoilState(signedInUserSelector);

  const signInWithGoogleAccount = async () => {
    const googleUser = await googleClient.signIn();
    setUser(googleUser);
  };

  const signInWithLocalAccount = async (email: string, password: string) => {
    const localUser = await localClient.signIn(email, password);
    setUser(localUser);
  };

  const signOut = async () => {
    await localClient.signOut();
    setUser(null);
  };

  return {
    signInWithGoogleAccount,
    signInWithLocalAccount,
    signOut
  }
}

组件使用方式和你期望的基本一致，只需要先调用Hook拿到方法即可：

function SignInFormComponent() {
  const { signInWithGoogleAccount } = useAuthActions();
  return <button onClick={signInWithGoogleAccount}>登录</button>
}

方案2：全局暴露更新方法（适合非组件场景调用） #

如果你需要在普通工具函数、请求拦截器等完全脱离React组件的场景下也能更新Recoil状态，可以通过顶层组件挂载时保存Recoil更新引用来实现：
首先定义一个全局变量存储Recoil的更新方法：

// recoil/utils.ts
import type { MutableSnapshot } from 'recoil';
import { signedInUserSelector } from '你定义selector的文件路径';

// 全局存储set方法
let globalRecoilSet: MutableSnapshot['set'] | null = null;

export const initGlobalRecoilSet = (set: MutableSnapshot['set']) => {
  globalRecoilSet = set;
};

// 封装全局更新用户状态的方法
export const setGlobalUser = (user: SignedInUser | null) => {
  if (!globalRecoilSet) {
    throw new Error('Recoil未初始化完成，请确保在RecoilRoot挂载后调用');
  }
  globalRecoilSet(signedInUserSelector, user);
};

然后在你项目根组件的RecoilRoot的initializeState参数中初始化这个全局set方法：

// App.tsx
import { RecoilRoot } from 'recoil';
import { initGlobalRecoilSet } from './recoil/utils';

function App() {
  return (
    <RecoilRoot
      initializeState={({ set }) => {
        initGlobalRecoilSet(set);
        // 其他初始化逻辑
      }}
    >
      {/* 你的应用其他内容 */}
    </RecoilRoot>
  )
}

之后你就可以在任意普通函数中直接调用setGlobalUser更新状态了：

export async function signInWithGoogleAccount() {
  const googleUser = await googleClient.signIn();
  setGlobalUser(googleUser);
}

这种方案的注意事项是：必须确保调用方法时RecoilRoot已经完成挂载，否则会抛出异常。

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