問題タブ [ngrx-store]

アプリで ngrx/store を使用していますが、配列の保存に問題があります。私の配列は、起動時に次のように空に設定されています。

次の関数を使用して、2 つの CustomObjects の配列を手動でフィードしようとしています。

この関数を呼び出すと、レデューサー関数への呼び出しがディスパッチされます。

export const mainReducer: ActionReducer = (state: AppState, action: Action) => {

}

これで問題ないように見えますが、メイン アプリ コンポーネントの配列が 2 つのオブジェクトを取得していません。これら 2 つの CustomObjects を持つようにデフォルトの状態を手動で設定すると、うまくいきます (いつでも配列を更新できるようにする必要があるため、これを行うことはできません)。私の HomeComponent は以下を使用します:

オブジェクトを分析したところ、'this.customObjects$' が 2 つの CustomObjects の配列になることが予想されます。代わりに、ScalarOservable です。

ScalarObservable {_isScalar: true、値: undefined、スケジューラー: null} など。

注 - 必要かどうかはわかりませんが、ホーム コンポーネントの @Component セクションに ChangeDetectionStrategy.onPush を含めました。私も使用することを確認しました

私の app.module クラスで。

私が間違っていることと、「this.customObjects $」が2つのオブジェクト配列ではない理由を誰かが知っていますか? ngrx/store は初めてです - レデューサー関数が配列を設定する方法に問題があるように感じますが、よくわかりません。

現在、ngrx ストアを使用するように Angular アプリケーションをリファクタリングしており、2 つのオプションがあります。アプリケーションの基本構造は次のとおりです。ほとんどの Angular アプリケーションは同じように構築されていると思います。

ContainerComponent は を注入しStore<AppState>ました。私が解決しようとしている問題は、GrandGrandChildComponent (たとえば、DropDownMenu コンポーネント) がアプリケーションの状態に基づいて動作を変更し (つまり、ストアで発生する特定の条件でいくつかのメニュー項目を無効にする)、クリック時にイベントを発行する必要があることです。メニュー項目でContainerComponent(または祖先でなくても、その他のコンポーネントが) それに反応する可能性があります。

それを解決するには、いくつかの方法があります。

1. @Input/を使用してコンポーネント間で通信する@Output
2. Store状態を知る必要があるコンポーネントに注入する

オプション 1 は、ドキュメントで読んだ中で最も一般的/推奨されるパターンです。したがって、ContainerComponent のみが太く、すべての子はシン/ダムであり、 を介して入ってくる状態に依存し@Inputます。

しかし、私が見たところ、このアプローチは多くのボイラープレートを追加し、状態を孫のコンポーネントに渡すためだけに不要な属性を追加する必要があります。また、中間コンポーネントは下にあるコンポーネントで何が必要かを知る必要があるため、懸念の分離の原則を破ります。また、グランド コンポーネントでしか利用できない詳細を知っていると、ジェネリック コンポーネントを作成するのは容易ではありません。

一方、アプローチ 2 は、関心の分離の問題を解決しているようであり、よりクリーンな実装でもあるようです。しかし、私はreduxパターンの使用に比較的慣れていないため、それが正しい方法であるかどうかはわかりません。おそらく、リファクタリングに深く入り込みすぎたときに直面する可能性のある落とし穴も知らないでしょう。

IMO、両方のアプローチは、私にとって非常に大きな各コンポーネントのテストの簡単な方法を提供します.

どのアプローチをとるべきか迷っています。どのような落とし穴に注意する必要がありますか?

ありがとう