javascript - 如何更新 Recoil.js 外部组件中的原子(状态)？ ( react )

Question

我是 Recoil.js 的新手，我在应用程序中为登录用户提供了以下原子和选择器:

const signedInUserAtom = atom<SignedInUser | null>({
    key: 'signedInUserAtom',
    default: null
})

export const signedInUserSelector = selector<SignedInUser | null>({
    key: 'signedInUserSelector',
    get: ({ get }) => get(signedInUserAtom),
    set: ({ set, get }, newUserValue) => {
        // ... Do a bunch of stuff when a user signs in ...

        set(signedInUserAtom, newUserValue)
    }
})

所以基本上我使用 signedInUserSelector为了设置新用户。
现在，我想要一些函数可以通过选择器设置用户，并在我的组件中使用它们，例如:

  export async function signInWithGoogleAccount() {
     const googleUser = async googleClient.signIn()
     // here I need to set the user atom like:
     //  const [user, setUser] = useRecoilState(signedInUserSelector)
     // setUser(googleUser)
  }

  export async function signInWithLocalAccount(email: string, password: string) {
     const localUser = async localClient.signIn(email, password)
     // here I need to set the user atom like:
     //  const [user, setUser] = useRecoilState(signedInUserSelector)
     // setUser(localUser)
  }

  export async function signOut() {
      await localClient.signOut()
      // here I need to set the user atom like:
     //  const [user, setUser] = useRecoilState(signedInUserSelector)
     // setUser(null)
  }

问题是因为这些函数没有在组件内部定义，所以我不能使用反冲钩子(Hook)(比如 useRecoilState 来访问选择器/原子)。
最后，我希望有任何组件能够做到:

function SignInFormComponent() {
  return <button onClick={signInWithGoogleAccount}>Sign In</button>
}

但是如何访问 signInWithGoogleAccount 中的选择器/原子如果它不在组件中？

Answer 1

正如我在 another answer 中指出的那样，你一般不想碰到这个，但如果你最终真的需要更新 React 之外的原子 您可以尝试的组件Recoil Nexus .
在您拥有 RecoilRoot 的同一个文件中，您将拥有类似的内容:

import React from 'react';
import { RecoilRoot } from "recoil"
import RecoilNexus from 'recoil-nexus'

export default function App() {
  return (
    <RecoilRoot>
      <RecoilNexus/>
      
      {/* ... */}
      
    </RecoilRoot>
  );
};


export default App;

然后，无论您需要在哪里读取/更新值:

import yourAtom from './yourAtom'
import { getRecoil, setRecoil } from 'recoil-nexus'

最终，您可以像这样获取和设置值:

const loading = getRecoil(loadingState)

setRecoil(loadingState, !loading)

而已!
免责声明:我是图书馆的作者。

检查此CodeSandbox一个活生生的例子。