世界一わかりやすい@ngrx/storeとeffectsの実装

Uncategorized

Ngrxのチュートリアルは理解できるんだけど、自分で最初から書こうとするとよく分からない。

過去3度挫折したが、ようやく理解できた!!(気がする)

チュートリアルはできるんだけど。。。

Qiitaの記事見たんだけど、理解できない。。。

みたいな人は、この記事最後まで見てください。

それぞれ順番を追って丁寧に説明するので、私のように今まで挫折した人もきっと理解して実装できるようになるはず!!

ちなみにNgrxのチュートリアルはやってない人は先にチュートリアルお願いします。

NgRx Docs
NgRx Docs

実装の概要

ログイン状態を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

【今回のコード部分】

Merge pull request #21 from ksakae1216/feature/add-root-store · ksakae1216/angular-project-2021@8170900 · GitHub

最後に

今年からJoinしてる現場がNgrxを使ってて、毎日タスクをこなしながらNgrxのコードを見てたので、もしかしたら再チャレンジすれば書けるんじゃないかと思い、2週間くらいまた最初から書いてました。

今まで、何度も挫折した分、動いた時のうれしさは、ハンパなかったです!!

Ngrxは学習コストが高く、絶対に必要かと言われればそんな事は無いと思いますが、使いこなせればなかなかパワフルなライブラリです。

状態管理が複雑で苦労してるならNgrxはぜひおすすめかなと。

※もし、わかりづらいとこあったら、コメントください。twitterでもいいです。

コメント

タイトルとURLをコピーしました