Closed4
Zustandを使う
Jotaiは使ってみたので、Zustandも触ってみることにした。
今は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);
使う側の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);
React Contextの代替としてJotaiを使うとスムーズにいけそう。Reduxはよく知らないけれど、初めからZustandを使うという選択をしてアプリを作り始めるのもまた良さそう。
JotaiもZustandも簡単に使えすぎるので、今の簡単なアプリではあまり違いが体感できなかった。トップダウンとボトムアップのところくらい。とりあえずZustandのほうがimport文が1行で済むのは良い。
このスクラップは2022/08/17にクローズされました