Ngrxのチュートリアルは理解できるんだけど、自分で最初から書こうとするとよく分からない。
過去３度挫折したが、ようやく理解できた！！（気がする）
チュートリアルはできるんだけど。。。
Qiitaの記事見たんだけど、理解できない。。。
みたいな人は、この記事最後まで見てください。
それぞれ順番を追って丁寧に説明するので、私のように今まで挫折した人もきっと理解して実装できるようになるはず！！
ちなみにNgrxのチュートリアルはやってない人は先にチュートリアルお願いします。
実装の概要
ログイン状態をstoreに持ちます。
ログインボタン押下したらeffectsがサービス呼んで、結果をreducerがstoreに格納します。
失敗したらエラーメッセージをstoreに格納します。
ライブラリインストール
まずはこれをインストール
- @ngrx/effects
- @ngrx/store
reducerにstoreの情報を定義
ログイン状態のstoreの型、初期値をreducerに定義します。
※reducer, action, effects, selectorは全てstateディレクトリ（同じディレクトリ）
gista443e63685d7feaee6c111d4ac1c62eb
interface LoginModelがログイン状態の型。
initialStateが初期値です。(errorMessage?としてるので初期値なくてもOK)
selector
次にselectorを作成します。
storeから情報を取得したい事を定義する。
gist1118b9c4ac794faf14fd913456f7ea08
action
次はaction
ログインボタン押下した時、storeを更新したいとかの処理を書く。
gist0d6e15ebb3e6436520d66ffba1a2fc91
reducer
次、reducer
まさしくstore更新の処理を書く、もらった値をstoreに更新など。
gist2d12dc3f5097ef3968615304416a9342
effects
次、effects
API実行したり、store更新のaction読んだりを書く。
gistacc5b3c36ed9a0fbf7c8e58e96571de2
app.module.ts
最後は、app.module.ts
gistd50e7566c5023adcec6f9fe3393e9b57
demo
ここまでのコードを軽くdemoします。
最初にログイン失敗した時、次にログイン成功した時。
www.youtube.com
※chromeでstoreの状態を見たかったら下記を参考にライブラリ入れてコード書いてください。
【Angular】reduxjs/toolkitの導入手順 – フリーランス チャレンジ！！
demoのソース↓↓↓
【全体】
GitHub – ksakae1216/angular-project-2021 at v0.1
【今回のコード部分】
最後に
今年からJoinしてる現場がNgrxを使ってて、毎日タスクをこなしながらNgrxのコードを見てたので、もしかしたら再チャレンジすれば書けるんじゃないかと思い、２週間くらいまた最初から書いてました。
今まで、何度も挫折した分、動いた時のうれしさは、ハンパなかったです！！
Ngrxは学習コストが高く、絶対に必要かと言われればそんな事は無いと思いますが、使いこなせればなかなかパワフルなライブラリです。
状態管理が複雑で苦労してるならNgrxはぜひおすすめかなと。
※もし、わかりづらいとこあったら、コメントください。twitterでもいいです。
コメント