Jotaiを使う

今作っているNext.jsアプリのCotextが多すぎてコードが乱雑になってきた。

_app.tsx

<IsMuteContext.Provider value={{ setIsMute, isMute }}>
  <CountContext.Provider value={{ setCount, count }}>
    <HistoryProvider>
      <Component {...pageProps} />
    </HistoryProvider>
  </CountContext.Provider>
</IsMuteContext.Provider>

smallStall

Contextが多すぎる場合、Jotaiでまとめるのが良いらしい。
Jotaiでカバーしきれない複雑なアプリになる場合、Recoilを使うのが良さそう。
Zustandの場合、Jotaiと組み合わせても使える。Redux使ってきた人ならZustandの方が良いのかな？

smallStall

Jotaiを導入した結果、以下の通り整理された。

atoms/contexts.ts

import { atom } from "jotai"
import { CountAt } from "types/history"

export const isMuteAtom = atom(false);
export const countAtom = atom({ now: "", maxCount: 0 });
export const historyAtom = atom<Array<CountAt>>([]);

_app.tsx

  <Component {...pageProps} />

ちょっと嫌なのは、contextを使う部分でimportが2行になってしまうところ。
仕方ないといえば仕方ないけれど。

component/Counter.tsx

import { countAtom } from "atoms/context";
import { useAtom } from "jotai";

次のようにuseStateと同じ記法を使う。

component/Counter.tsx

  const [count, setCount] = useAtom(countAtom);

smallStall

自分は入れ子構造があまり好きではないので、Jotaiを使ったほうがだいぶコードが見やすくなったと思う。
これならReact Contextいらないんじゃないかという気さえしてくる。それぐらい簡単。

smallStall

storageに保存もできるのか。

このスクラップは2022/08/15にクローズされました