問題タブ [ngrx]

データベースに多数のエントリ (ユーザーなど) があるとします。リスト用と詳細用 (エントリを編集できる場所) の 2 つのルートもあります。今、データ構造にアプローチする方法に苦労しています。

私は2つのアプローチと、両方のちょっとした組み合わせを考えています。

共有データセット

• に移動し/list、すべてのユーザーが redux ストアに保存されている api からダウンロードされ、キーの下にとusersを追加 して、リストの一部のみをレンダリングしますusers_offsetusers_limit
• 次に、に移動し/detail/<id>、値として保存currently_selected_userし<id>ます...つまり、このようなものでユーザーのデータを取得できますusers.find(res => res.id === currently_selected_user)
• 1 つのデータ セットとそれを指している詳細だけで作業しているので、更新も簡単です。
• 新しいユーザーの追加も簡単で、同じユーザーのリストを操作するだけです

このアプローチで私が抱えている問題は、ユーザーのリストが膨大になると (数百万人など)、ダウンロードに時間がかかる場合があることです。また、 に直接移動すると/detail/<id>、まだすべてのユーザーがダウンロードされていないため、必要なユーザーのデータだけを取得するには、最初にすべてをダウンロードする必要があります。1 つを編集するだけで何百万ものユーザー。

分離データセット

• に移動し/list、すべてのユーザーを api からダウンロードする代わりに、 myusers_per_pageとのusers_current_page設定に応じて、いくつかのユーザーのみをダウンロードし、おそらくデータを次のように保存します。users_currently_visible
• 次に、に移動し/detail/<id>、値として保存currently_selected_userし<id>ます...そして、検索する代わりにusers_currently_visible、APIからユーザーのデータをダウンロードするだけです..
• 更新時に、私は決して更新するつもりはありませusers_currently_visibleん
• また、追加しません

ここで考えられる問題は、 にアクセスしたときに/list、API からデータを再度ダウンロードする必要があることです。これは、データベース内のデータと同期していない可能性があるためです。また、不必要にユーザー データを詳細にダウンロードしている可能性もあります。彼らは偶然にもすでに私の中にいるかもしれませんusers_currently_visible

ある種のフランケンシュタインの悪ふざけ

• 詳しくは、分離されたデータセットと同じことを行いますが、API からユーザーのデータを直接ダウンロードする代わりに、最初に確認します。
  • 私は何か持っていますかusers_currently_visible
  • もしそうなら、それらの間に私のIDを持つユーザーがいますか? 両方が true の場合は、それをユーザー データとして使用し、それ以外の場合は API 呼び出しを行います。
• 更新時に同じことが起こります。ユーザーが存在するかどうかを確認し、存在するusers_currently_visible場合はそのリストも更新します。存在しない場合は何もしません

これはおそらくうまくいくでしょうが、それが適切な方法だとは思えません。users_currently_visibleまた、新しいリストを追加した可能性があるため、にアクセスしたときにの新しいリストをダウンロードする必要があるでしょう/list..

これを行うファンのお気に入りの方法はありますか?... redux ユーザーは誰もが同じことに遭遇したに違いないと確信しています。

ありがとう！

@ngrxで作業しようとしている明らかな何かが欠けていると思います。ネストされたレデューサーを使用しようとしていますが、デフォルトの開始子値を返すことができるようにしたいと考えています。これは私の子供です

私の質問は、これを使用して追加のカウンターを初期化する方法です。私の counters.ts は次のようになります

これは機能しますが、カウンターで typescript エラーが発生しました:Supplied parameters do not match any signature of call targetこれを回避する方法を知りたいです。

これを提供する@ngrxを使用しています：

HTTP アクションを作成してディスパッチするための単純なコード パスが必要です。私がやりたいことは次のようなものです：

このようにして、成功と失敗の両方の応答が JSON に変換され、成功/失敗の基準に基づいて正しいリダクション タイプが割り当てられるため、ストアを適切に操作できます。(200 または 401 を返すユーザー ログインの成功と失敗を考えてください)。

これを処理するためのよりクリーンまたはより良い方法はありますか? オブザーバブルを返さないため、現在の 2 番目.catchはうまく機能しません。

提案やその他の解決策を歓迎しますか?

私は作業して@ngrx/storeおり、リクエストが開始されたとき、またはエラーが返されたときに通知を表示し、リクエストが成功した場合は非表示にしています。意図したとおりに機能し、リクエストがすぐに終了した場合に表示されないように、最初の通知を遅らせたかったのです。時間とともに機能するいくつかの Observable/Subject 演算子を試しました。

• delayとbufferTime メッセージはnullエラーの原因 となります<notification>
• を使用debounceTimeしても最初のメッセージは表示されませんが、応答が遅く、エラーメッセージが表示されますnull
• throttleTime最初の通知のみを表示し、応答が遅いと非表示にします

これらのいずれもなしで*ngIf="(notification |async)"は、それは仕事であり、通知がそうでない場合にのみメッセージnullが設定されます。

CSS遷移遅延で非表示にすることもできると思います<notification>が、これを解決する他の方法を誰かが知っているかどうか疑問に思っていました...

Angular2 アプリケーションで NGRX と RxJS を使用しています。レコードの更新を保存しようとすると、「UPDATE」アクションを生成し、API を呼び出してデータベースを更新したいと考えています。

問題は、「.filter ( action => action.type==UPDATE )」の後のすべてが 4 回呼び出されることです。

理由がわかりません。私は多くのこととコードの変更を試みますが、問題はまだここにあります...

私のコード:

問題をライブで表示するには:

https://plnkr.co/edit/zq4AsKJYILfrgItDNbHo?p=preview

マスター パネルで従業員を選択します。詳細パネルで、保存ボタンをクリックします。API が 4 回呼び出されることがコンソールに表示されます。

ご協力ありがとうございました ！！

私は@ngrx/storeオブザーバブルとオブザーバブルを利用しています。ユーザーの JWT など、ユーザーに関する情報を設定するユーザー レデューサーがあります。

モデルをサブスクライブするルートにANavigationServiceが注入され、ユーザーのトークンの存在に基づいてルーティングされます。Aはローカル ストレージを読み取り、結果をレデューサーにディスパッチします。AppComponentuserUserServiceuser

問題は、ホームページにルーティングしようとすると、goToLogin()以下のエラーが表示されることです...あまり情報がありません。

ルート コンポーネントがまだ設定されていないと推測しています。アプリケーションがロードされるのを待ってからルーティングする方法はありますか? または、以下のエラーは別の問題を示していますか?

いくつかの ngrx の例 ( https://github.com/SekibOmazic/ngrx-auth-example ) と ( https://github.com/ngrx/angular2-store-example ) を見ると、どちらもへのサブスクリプションを作成します保存してから、REST API 呼び出しを行います。

エラーを返すように両方のコードを変更しましたが、サブスクリプションはそのままです (たとえば、ログインしようとすると 404 が返されます)。コンソールにエラーが表示されますが、再度ログインできます。

私のコードでは、ほぼ同じ設定をしていますが、ログイン応答が失敗すると、サブスクリプションが強制終了されます (私が知る限り)。

4XX エラー応答コードがサブスクリプションを無効にしないためには、どのような魔法が必要ですか?