![【React】Zustandで、簡単に状態管理する](/images/383-image1.png)
【React】Zustandで、簡単に状態管理する
今回は、Zustand(ツースタンド)という、React で状態管理するためのライブラリを紹介します。
Zustand は、かなり軽量なアプリで、かつグローバルな状態で簡単に管理することができます。
前提条件
今回テストするために、react-router-dom(v6.6.1)をインストールしています。
App.tsx
インストールする
まずは、Zustand をインストールします。
ターミナルで、npm install --save zustandを実行しましょう。
フックを作成する
Zustand のインストールが完了したので、フックを作成します。
今回は、簡単にカウントアップを行います。
hooks フォルダに countStore.ts を作成します。
zustand からcreateをインポートします。
useCountStoreを作成し、create内でアロー関数を作成します。
初期値のcountsは 0 にし、increaseが動作するたびにcountsが 1 増えるようにします。
setで React のuseStateのように、状態を更新します。
フックが完成したので、Test1 ページで使用します。
状態管理する
まずは、ブラウザに初期値を表示します。
Test1 ページでuseCountStoreをインポートします。
useCountStoreの中で、countsを指定します。
ブラウザで確認すると、
countsの初期値である 0 を表示することができました。
次に、increaseを追加します。
countsの下に、increaseを作成しましょう。
『+』ボタンを作成します。
ブラウザを確認しましょう。
『+』ボタンをクリックすると、
カウントが増えていきました。
また、zustand のshallowを使うことで、同じフックを一つにまとめることができます。
次に、React Router を使って、Test2 ページへ画面遷移するようにします。
Test1.tsx を作成します。
Test2.tsx
Test1 ページにreact-router-domをインポートします。
Test2 ページへ遷移するリンクを作成します。
では、ブラウザで状態管理できているか確認します。
Test2 ページへ遷移すると、
counts が 6 の状態のまま、Test2 ページへ遷移しました。
お知らせ
![Udemy Online Cource](/images/oc_react.jpg)
私事ですが、Udemyで初心者を対象にしたReactの動画コースを作成しました。
Reactについて興味がありましたら、ぜひ下のリンクからアクセスしてください。
詳しくはこちら(Udemyの外部サイトへ遷移します)