Closed4

Zustandを使う

smallStallsmallStall

今はJotaiを適用したところで、これをZustandに変えてみる。

atoms/contexts.ts
import { atom } from "jotai"
import { HistoryItem } from "types/history"
import { Count } from "types/count";

export const isMuteAtom = atom(false);
export const countAtom = atom({ now: "", maxCount: 0 });
export const historyAtom = atom<Array<HistoryItem>>([]);
component/Counter.tsx
import { countAtom } from "atoms/context";
import { useAtom } from "jotai";

...

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

使う側のimportがjotaiではuseAtomと〇〇Atomの2つ必要だったのが、Zustandではstoreだけなので、1つに減った。

store.ts
interface TimerState {
  isMute: boolean
  count: Count
  history: Array<HistoryItem>
  setCount: (by: Count) => void
  setHistory: (by: Array<HistoryItem>) => void
}

export const useTimerStore = create<TimerState>()(persist((set, get) => ({
  isMute: false,
  history: [],
  count: { nowCount: 0, maxCount: 0, isWorking: false },
  setCount: (by) => set({ count: by }),
  setHistory: (by) => set({ history: by }),
}), { name: 'timer-storage' }))
component/Counter.tsx
import { useTimerStore } from "store/store";

...
  const count = useTimerStore((state) => state.count);
smallStallsmallStall

React Contextの代替としてJotaiを使うとスムーズにいけそう。Reduxはよく知らないけれど、初めからZustandを使うという選択をしてアプリを作り始めるのもまた良さそう。
JotaiもZustandも簡単に使えすぎるので、今の簡単なアプリではあまり違いが体感できなかった。トップダウンとボトムアップのところくらい。とりあえずZustandのほうがimport文が1行で済むのは良い。

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