👻

React状態管理ライブラリ Jotai で非同期処理 #JotaiFriends

2022/01/18に公開約2,700字

Async support is first class in jotai. It fully leverages React Suspense.

JotaiでのAsyncサポートは一流です。React Suspenseをフルに利用しています。

Suspenseが関係するのはatomのread関数をasync化する時のみです。write関数はSuspenseで囲わずともasync関数として定義・使用可能です。

Suspense

To use async atoms, you need to wrap your component tree with <Suspense>.
If you have <Provider> at least one <Suspense> is placed inside the <Provider>.

非同期atomを使うには、コンポーネントツリーを <Suspense> で囲む必要があります。
もし、<Provider> があれば、少なくとも1つの <Suspense><Provider> の中に入ります。

const App = () => (
  <Provider>
    <Suspense fallback="Loading...">
      <Layout />
    </Suspense>
  </Provider>
)

Having more <Suspense>s in the component tree is possible.

コンポーネントツリーでより多くの<Suspense>を持つことは可能です。

Async read atom

The read function of an atom can return a promise. It will suspend and re-render when the promise is fulfilled.

atomの read 関数は、promiseを返すことができます。promiseが実行されるとレンダリングを中断して再レンダリングします。

Most importantly, useAtom only returns a resolved value.

最も重要なことは、useAtomは解決された値しか返さないということです。

const countAtom = atom(1)
const asyncCountAtom = atom(async (get) => get(countAtom) * 2)
// even though the read function returns a promise, 訳) read関数がプロミスを返しても

const Component = () => {
  const [num] = useAtom(asyncCountAtom)
  // `num` is guaranteed to be a number. 訳) `num` は数値であることが保証されます。
}

An atom becomes async not only if the atom read function is async, but also one or more of its dependencies are async.

atomは、atomのread関数が非同期であるだけでなく、その依存関係の1つ以上が非同期である場合には非同期となります。

const anotherAtom = atom((get) => get(asyncCountAtom) / 2)
// even though this atom doesn't return a promise,
// it is a read async atom because `asyncCountAtom` is async.
// 訳) このatomはプロミスを返しませんが、`asyncCountAtom`は非同期なので、非同期なread-only atomになります。

Jotaiの紹介特集について

この記事はJotai FriendsによるJotai紹介特集記事の1つです。記事一覧はこちらからどうぞ。

Jotai Friendsとは

いちJotaiファンとして、エンジニアの皆さんにもっとJotaiを知ってもらって使ってもらいたい、そんな思いから立ち上げたのがJotai Friendsです。

https://jotaifriends.dev/

現在まだまだ準備中ですが今後ともよろしくお願いします!
(ご興味持っていただけた方は是非jotaifriends.devにてEメールアドレスのご登録をお願いします🙏)

Discussion

ログインするとコメントできます