web-dev-qa-db-ja.com

ngrx：createSelectorメソッド内のセレクターにパラメーターを渡す方法

私の店には非常にシンプルな状態があります：

const state = {
 records: [1,2,3],
};

レコードのセレクターがあります。

export const getRecords = createSelector(getState, (state: State) => state.records));

そして今私が欲しいのは、インデックスによって各レコードを取得するための個別のセレクターを持つことです。この目的のために、この方法で小道具を使用して1つの汎用セレクターを作成します。

export const getRecordByIndex = createSelector(
getRecords,
(state: State, { index }) => state.records[index]),
);

その後、いくつかの特定のセレクターを作成しますe。 g .:

export const getFirstRecord = createSelector(
getRecordByIndex(/* somehow pass index = 0 to this selector */),
(firstRecord) => firstRecord),
);

ただし、createSelectorメソッド内でパラメーターを使用するときに、パラメーターをセレクターに渡す方法については言及していません。出来ますか？

angularngrx
9
user3429127

このブログ投稿から： https://blog.angularindepth.com/ngrx-parameterized-selector-e3f610529f8

NgRx 6.1の時点で、セレクターは追加のprops引数も受け入れます。つまり、セレクタを次のように定義できるようになりました。

export const getCount = createSelector(
  getCounterValue, 
  (counter, props) => counter * props.multiply
);

this.counter = this.store.pipe(
  select(fromRoot.getCount, { multiply: 2 })
);

ああ...しかし、あなたの質問を読み直して、あなたはこのセレクタを使用する別のセレクタをどのように構築するのですか？上記のリンクの記事は、ファクトリー関数の構築を提案しています。

7
DeborahK

私は使っている "@ngrx/entity": "7.2.0",そして、私がプロップが各セレクターに渡されることを確認できます。たとえば、私の呼び出しているコンポーネントでは：

this.isActive$ = this.store.pipe(select(fromClient.isActive, { id: 'someid' }));

そして、私のレデューサーには次のものがあります：

export const getClientState = createFeatureSelector<ClientState>('client');

export const getClient = createSelector(
  getClientState,
  (state, props) => {
    // do something with props.id to get the client then:
    return state;
  }
);

export const isActive: = createSelector(
  getClient, // props are passed to here
  (state: any) => { // i don't add the props argument here, as i don't need them
    return state.isActive;
  }
);
2
Ian Jamieson

プロジェクター機能を使用できます：

export interface Record {
  // Some sort of record interface
}

export interface State {
  records: Record[];
}

export const getRecords = createSelector(
  getState,
  (state: State): Record[] => state.records)
);

export const getRecordByIndex = createSelector(
  getRecords,
  (records: Record[], { index }) => records[index]),
);

export const getFirstRecord = createSelector(
  getRecords,
  (records: Record[]) => getRecordByIndex.projector(records, { index: 0 })
);
0
grahamaj

セレクタの固定パラメータを使用すると、正常に機能します。

this.counter = this.store.pipe(
    select(fromRoot.getCount, { multiply: 2 })
);

しかし、動的パラメータについてはどうですか：

this.counter = this.store.pipe(
   select(fromRoot.getCount, { multiply: this.getMultiplier() })
);

getMultiplier() {
    ...
    return myUser.multiplier + magicFactor;
}

それは私のアプリで動作しませんでした:-(（NgRxバージョン8）

0
Reinhard