jotai

atom 置き場所

code:dai-shi_comment

src/features/

src/features/featureA/

src/features/featureA/atoms/

src/features/featureA/components/

src/features/featureB/

src/features/featureB/atoms/

src/features/featureB/components/

src/atoms/

atom を export するかカスタムフック定義してを export するか

気になる

読み書きで分けるとして

code:atom.ts

const fooAtom

const readFooAtom

const readWriteFooAtom

export function useFooValue() {...}

export function useFooState() {...}

アクションに名前つけるのやや無駄感ある

使う側で useAtom 系 hooks を使うのも、なんか知識が漏れているような

code:useAtomHooks.ts

const value = useAtomValue(anAtom)

const setValue = useSetAtom(anAtom)

jotai way じゃないけど reducer 的なものを export したくなっちゃうな

atom export する派になりかけたけど

子に渡す or 子も useAtom する

これはいいとして

https://gyazo.com/514b31e48f151bc7a25b3ceaac369442

これはどっちにするのか?

https://gyazo.com/a9e56e67ffe359380ef6778036115f56

やり方色々あるのは良いとして、何を考えてやってるのか気にしないと混ざってめちゃめちゃになりそう

左: 子に value や setter を渡す

コンポーネントライブラリやデザインシステム的コンポーネントがあるならこう渡すことになる

子に再利用性がある & presentational なものならまあこちらか

2階層以上(親 useAtom → 子 → 孫)渡さないと決めるのはいいが、検出するのはダルい

狙ってなくても 子 のコンポーネントリファクタリングしたら発生したり

右: 子も useAtom する

アプリケーション中に1つしかないようなやつなら自然

親子の依存は減っている、減っているが atom との依存に置き換わっている

それはそれでいい気も、そもそも global state 共有のためにいれてるんだし

atom 定義したファイルと jotai 両方からの import が増える

別: 親が atom を子に渡す

まあ基本やらない気がするが...

複数種の atomFamily を受け取るコンポーネントを複数並べたいときとか?

atom 渡す vs FamilyAId と FamilyBId 両方受ける?

atom を組み合わせる例

delived

code:derived.ts

const primitiveAtom = atom(initialValue)

const derivedAtomWithRead = atom(read)

const derivedAtomWithReadWrite = atom(read, write)

const derivedAtomWithWriteOnly = atom(null, write)