なになれスマートフォン用の表示で見るなになれIT系のことを記録していきます。ReduxNgRxはAngularにおける状態管理のためのライブラリです。2018でも状態管理関連のセッションはNgRxを前提とした内容が多く、デファクトスタンダードなのではと思います。Heroesに対してNgRxを適用してみました。github.com今更ながら、Reduxライクな状態管理について勉強しているので、その一貫としてAngularにReduxを適用したいというのが動機です。NgRxの使い方については末尾の参考を見てもらうとして、以下、使用してみた所感です。状態管理に対して厳格な設計を適用できるNgRxを使うことでActions、ReducersといったReduxの要素をどのように実装すれば良いか明確な指針が示されます。作る側はその通りに作れば良いので、設計を考える必要が無くなります。Reduxを適用するにあたり考慮しなければいけないこととして、HTTP通信などの外部システムとのやりとりをどうするかといった問題があります。NgRxではこの問題をEffectsで対処しています。Effectsを使うことで、ActionsからReducersへの処理の流れをそのままにして、HTTPリクエストの処理とHTTPレスポンスの処理とを下記のようなコードで制御することができます。DevToolsを使い、Action毎に状態を可視化できるのが便利です。悪い面RxJS+Redux+αといった作りが重いReduxに対して色々な要素が盛り込まれているので理解して、使いこなすまでに学習コストがかかるライブラリという印象です。個人的には特にEffectsやSelectors、EntityといったNgRx独自の要素に戸惑いました。コードの見通しに注意を払う必要がある状態管理のために必要な要素が多いので、コード量が多くなり、見通しが悪くなります。モジュールを分けるなどして見通しを良くする工夫を意識する必要がありそうです。今回試しに作成したReducersはコードの見通しが悪いと感じています。下記コードの他にEffectsも関係しているので複雑です。APIからのレスポンスといったActionを細かに定義することが求められます。DevToolsを使った状態の変化を追跡するのに役に立ちます。Actionを細かに定義するのは面倒と感じることもあるように思います。単純に数が増えるのでActionをどのように定義すれば良いか迷います。Actionにおけるtypeの一例が下記です。Loaded'}イベントの発生源とイベントの内容を明確に定義することが推奨されています。まとめNgRxは大規模で複雑な状態管理を求められるアプリに対して適用するというのが分かりやすい判断基準だと思いますが、コストに見合った恩恵を得られるのか十分に検討する必要がありそうです。今回の取り組みで既存のServiceを使いつつ、NgRxが適用可能なことを確認できました。AngularはServiceを使うことである程度の状態管理ができます。Serviceで状態管理を始めて、状態管理が複雑になってきたらNgRxを適用するのが開発効率を考えると筋が良いように思います。16:51NgRxを試した所感Tweet広告を非表示にする関連記事2019-02-28Chrome拡張機能を作る過程で学んだReactのこと以前にChrome拡張機能を作りました。HeroesをVue+Vuexで再実装したVue+Vuexを勉強したアウトプットとしてアプリを作りました。»プロフィールid:hi1280日々で得たIT技術を記録していきます。月別アーカイブ関連記事2019年で学んだ技術AngularにおけるLazyLoadingの実現方法メモを共有するWebアプリを作った注目記事はてなブログをはじめよう!hi1280さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。