web-dev-qa-db-ja.com

Angular 6-サービスインジェクションではなく@ ngrx / storeを使用する理由

私は最近、@ ngrx/storeでAngular 6を学習していますが、チュートリアルの1つは状態管理に@ ngrx/storeを使用することですただし、@ ngrx /舞台裏の店。

たとえば、単純なログインおよびサインアップアクションの場合、以前はサービスを使用して(AuthServiceを呼び出しましょう)これを使用して、バックエンドAPIを呼び出し、AuthServiceに「userInfo」または「token」を保存します。 、ユーザーを「ホーム」ページにリダイレクトし、DIを使用してuserInfoを取得する必要があるコンポーネントにAuthServiceを挿入できますこれは1つのファイルAuthServiceがすべてを処理する

@ ngrx/storeを使用している場合、Action/State/Reducer/Effects/Selectorを定義する必要があります。おそらく、上記のアクションまたはイベントを処理するために4つまたは5つのファイルに書き込む必要があります。それでも、サービスを使用してバックエンドAPIを呼び出す必要がありますはるかに複雑で冗長なようです...

他のいくつかのシナリオでは、一部のページで@ ngrx/storeを使用してオブジェクトまたはグリッドデータのようなオブジェクトのリストを保存することもあります。ある種のメモリ内ストアの使用法ですか?

それでは、質問に戻りますここでAngularプロジェクトのサービス登録ストアで@ ngrx/storeを使用しているのはなぜですか?STATE MANAGEMENT "使用法、ただし、「状態管理」とは正確には何ですか?それはトランザクションログのようなもので、いつ必要になるのでしょうか。フロントエンドで管理する理由] @ ngrx/storeエリアでの提案や経験をお気軽に共有してください。

46
KevDing

Ngrxストアに関する次の2つの投稿を読む必要があると思います。

最初のものがNgrxストアによって解決された主な問題を説明する場合、React How-Toからこのステートメントを引用します。これは、元のFlux、Redux、Ngrx Storeまたはストアソリューション全般に​​等しく適用されるようです」:

Fluxが必要になる時期がわかります。必要かどうかわからない場合は、必要ありません。

私にとって、Ngrxストアは複数の問題を解決します。たとえば、オブザーバブルを処理する必要がある場合、およびいくつかのオブザーバブルデータの責任が異なるコンポーネント間で共有される場合。この場合、ストアアクションとリデューサーは、データの変更が常に「正しい方法」で実行されるようにします。

また、http要求のキャッシュのための信頼できるソリューションも提供します。リクエストとそのレスポンスを保存できるので、作成するリクエストがまだ保存されたレスポンスではないことを確認できます。

2番目の投稿は、Facebookの未読メッセージカウンターの問題により、そのようなソリューションがReactの世界に登場した理由についてです。

不可解なデータをサービスに保存するソリューションについて。一定のデータを処理している場合は正常に機能します。ただし、いくつかのコンポーネントでこのデータを更新する必要がある場合、変更検出の問題と不適切な更新の問題が発生する可能性があり、次の方法で解決できます。

  • プライベートサブジェクトpublic Observableおよび次の関数を持つオブザーバーパターン
  • Ngrxストア

3番目のオプションもあります。サービスにデータがあり、htmlでサービスを直接使用します(例:*ngFor="let item of userService.users")。そのため、追加または更新アクションがhtmlで自動的にレンダリングされた後にサービス内でuserService.usersを更新すると、オブザーバブルまたはイベントまたはストアは必要ありません。

4
Aleksa