2

非常に一般的な Redux (まあ、rxjs-store) 構造があります。基本的に、私のデータ型は、「要素」と呼ばれる汎用データ構造のすべての異なるバージョンです (それぞれが異なる「ElementType」で定義されています)。

目標は、新しいデータ オブジェクトが登場したときに、まったく新しいデータ オブジェクトのセットをストア、API、バックエンド、データベースなどに追加する必要がないことです。

これはこれまでのところうまく機能していますが、Redux & Reselect でセレクターが複数回再計算されるという問題に遭遇しました。

これが例です。私のページでは、特定のタイプの要素の 4 つのセットをロードする必要があります。

// subscribe to data
const elements$ = Observable.combineLatest(
  this.elementTypeManager.getElementTypeByName('DistributionNetworkNode'),
  this.elementTypeManager.getElementTypeByName('Socket'),
  this.elementTypeManager.getElementTypeByName('Area'),
  this.elementTypeManager.getElementTypeByName('DemandType'))
  .switchMap(nodeAndSocketTypes => Observable.combineLatest(
    this.elementManager.getElementsByType(nodeAndSocketTypes[0].id),
    this.elementManager.getElementsByType(nodeAndSocketTypes[1].id),
    this.elementManager.getElementsByType(nodeAndSocketTypes[2].id),
    this.elementManager.getElementsByType(nodeAndSocketTypes[3].id)));

elementTypeManager と elementManager は Redux アクションを送信するサービスであり、次のように reselect を使用してストアをクエリします。

public getElementsByType(elementTypeId: AAGUID): Observable<Elements> {
  // dispatch an action to the store (triggers http and storing data)
  this.store.dispatch(this.elementActions.loadElementsForType(elementTypeId));

  // use reselect to query store
  return this.store.select(getElementsByTypeFactory(elementTypeId));
}

このLoad Elementsアクションは、データを取得するための http 要求をトリガーしStore Elements Data、レデューサーが実行してストアに入れるアクションを発行します。

再選択セレクターは非常にシンプルで、次のようになります。

export const getElements = (state: AppState) => state.elements;

export function getElementsByTypeFactory(elementTypeId: AAGUID, includeValues: boolean = false) {
  return createSelector([getElements],
                        (elements: Elements) => elements.filter(e => e.elementTypeId === elementTypeId));
}

要素を受け取り、指定されたタイプでフィルタリングします。

問題は、アクションが順番に呼び出されることです。

Load Elements (DistributionNetworkNode)
Load Elements (Socket)
Load Elements (Area)
Load Elements (DemandType)

次に、順番に保存します。

Store Element Data (DistributionNetworkNode)
Store Element Data (Socket)
Store Element Data (Area)
Store Element Data (DemandType)

レデューサーがデータをストアに入れるたびに、reselect が再計算します。もちろん、まだすべてのデータを入れ終わっていないので、他のセレクターは 0 の結果を返します。

その結果、 myCombineLatestは 4 回出力します。1 つはDistributionNetworkNodeデータのみ、1 つはDistributionNetworkNodeandSocketデータ、もう 1 つはDistributionNetworkNode,SocketおよびAreaデータなどです。

これは、データの構造化方法と再選択の使用方法に関する継続的な問題であり、データの一般的な構造化方法を損なうことなく克服する方法がわかりません.

再選択でデータをクエリ/発行する前に、すべての要素データの格納アクションが実行されたことを確認するにはどうすればよいですか?

4

0 に答える 0