<aside> 💡

チャプター完了時点のソースコード

https://github.com/craftgear/react-hands-on/tree/ch6

</aside>

• redux toolkit
  • https://redux-toolkit.js.org/
• zustand
  • https://zustand-demo.pmnd.rs/
• recoil
  • https://recoiljs.org/
• jotai
  • https://jotai.org/

Atom

1. jotaiをインストールする

   npm i jotai
   

2. /state/counterAtom.ts ファイルを作成し、counterAtom を定義する

   import { atom } from 'jotai';
   
   export const counterAtom = atom(0);
   

3. <Counter /> コンポーネントをコピーして<CounterWithAtom/> コンポーネントを作り、 useState を useAtom で置き換える。

4. Index.tsx で <CounterWithAtom /> をインポートする。

5. ルーティングでカウントが保持されていることを確認する。

6. counterAtomを直接エクスポートする代わりに useCounterカスタムフックを作成し、エクスポートする。

   export const useCounter = () => useAtom(counterAtom);
   

Selector

1. オブジェクトを状態として持つ appStateAtom を追加する

   // object
   const appStateAtom = atom({ count: 0, message: '10未満' });
   export const useAppState = () => useAtom(appStateAtom);