Angular + Ngrx やってみた
Contents
Ngrxってなに？
- Ngrxっていうのは状態管理を提供するライブラリっていうけど、そもそも状態管理って何？みたいな状態からのスタートだったので、理解するのにとても苦労しました。
- 状態管理っていうのは、サーバーから取得した情報だったり、画面の入力した情報だったり、ログインしたユーザーの情報だったり、諸々を含めて状態って呼んでいるみたいです。
- 状態管理すると何がいいのかっていうと、フロントエンドで必要な処理を終えることができる、ということです。
- いちいち通信しないので、ブラウザの挙動に縛られずにある程度自由に開発することができるようになります。
- サーバー側にいちいち通信しないで、クライアント側で必要なデータの取り出し、計算、結果を画面に反映などできるようになるので、単純に画面表示速度が上がったり、ユーザビリティの高いサイト設計ができるようになります。
- そういった状態を管理する様々なパターンの中で、Angular用に作られたライブラリがNgrxで、NgrxはReduxっていう考えのもと作成されている、ということらしいです。
どうやって状態管理するのか
- 概念自体はかなり単純で、Reduxとかで調べるとわかりやすい図がよく出てくるんですが、viewからactionが発生したら、reducerがそれを受け取って、storeにstate(状態)を反映して、viewはそのstoreからstateを取得する、というものになります。
- 書いて見たけど、めちゃくちゃわかりづらい。
- もうちょっと噛み砕いて説明してみる。
まず、view（画面）でボタンクリックとか、入力などのactionが発生すると、その情報をreducerに渡します。reducerは情報が渡されると、何かactionがあったぞー！ということで、その情報を処理し始めます。その結果、状態に変化がある場合には、その情報をstoreに反映します。
ログインを例にとってみると、多分以下のようなactionがあります。
- ログイン成功
- ログイン失敗
ログインボタンが押されると、ログインが実行されて、その結果ログイン成功(action)ならstoreにユーザー情報とログイン状態を反映して、ログイン失敗なら空のユーザー情報とログイン状態を反映するとかそういった形になります。
そしてその結果をどう確認するのかというと、selectorを利用することになります。単純にstoreから欲しい情報を断片化して持ってきてくれる便利ツールです。
まとめ
Store
- 状態を保持しているところ。
Action
- 動作を管理するところ。
Reducer
- 状態を管理、変更するところ。
Selector
- 部分的に必要な状態だけを持ってきてくれるところ。
実際に使って見ました
前提条件
- Angular cliがインストールされていること
- vs codeがインストールされていること
- node.jsがインストールされていること
プロジェクトの作成と準備
vs code でターミナル開いて、任意のフォルダで以下実行してプロジェクト作成
ng new ngrx-practice※routingは利用しない、scssを選択する
必要なライブラリをインポート
npm install @ngrx/schematics
npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/store-devtools- –saveという記述はなくても自動でpackage.jsonに追記してくれるようになったらしい。
- schematicsはインストールしたまんまだと設定されないので、以下のコマンド実行する
ng config cli.defaultCollection @ngrx/schematics上記コマンドではangular.jsonにcliの設定が追加される。
"cli": {
"defaultCollection": "@ngrx/schematics"
}- 実際に実装して見ました。ソースはこちら
- これはAngularのチュートリアルをNgrx使って置き換えて見たものになります。
実際に使ってみて
- 学習にとても時間がかかりました。
- コード書きながらずっと思ってたんだけど、処理がとても抽象化されていて、全て疎結合になるんですが、その分わかりづらいです。
- なんも知らない状態でソース追っていっても、途中で「あれ？この先どう動いてんの？」って行き詰まります。
- ngrxの公式サイトのドキュメントは英語なんですが、redux用語みたいなのがあって、普通に翻訳したら訳が分からなくなるかもしれないです。（私はなんども心が挫けました笑）
ngrxを導入することで以下のメリットが得られるかと思います。
- 状態管理が一つにまとまる。
- 画面にデータを描画する処理と、画面に表示するためのデータを取得する処理が疎結合になるので、お互いに修正しやすい。
- Actionが正しく抽出できていれば、画面表示周りの処理を書く人と、データ取得する処理を書く人とで別々にコード書きやすい。
- chromeのdev-toolで状態がどう変遷したか一目でわかるので、バグ改修がしやすそう。
デメリットとしては、、、
- 学習コストが高い。
- ソースの書く量がめっちゃ増える。
- 疎結合だから、うまく動作しない時の原因がわかりづらい。selector使ってデータ取り出したいのに、なぜか取り出せない（エラーも出ていない）ことがありました。。。
デメリットの学習コストに関しては、Reduxって他のJavascriptのFWでもスタンダードな技術になっていたりするので、そう考えるとコストが高くてもそれ以上のリターンが得られるかと思います。