web-dev-qa-db-ja.com

Ngrx：2つのセレクターを組み合わせる

私はこれを作りましたIStore：

_export interface IStore {
  user: IUser;
  sources: ISourceRedux;
}
_

ここで、IUserは次のとおりです。

_export interface IUser {
    id: string;
    cname: string;
    sname: string;
    ...
}
_

そしてISourceReduxは：

_export interface ISourceRedux {
    entities: { [key: string]: ISource };
    ids: Array<string>;
    selectedIds: Array<string>;
    editingSource: ISource;
    defaultId: string;
}
_

だから、私はこれらのセレクターを作成しました：

_export const getSourcesState = (state: IStore) => state.sources;
export const getSelectedIds = (sourceRdx: ISourceRedux) => sourceRdx.selectedIds;
export const getSelectedSourceIds = createSelector(getSourcesState, fromSources.getSelectedIds);
_

したがって、これまでは、ユーザーがログに記録されているかどうかを確認するために、次のようにしました。

_this.store$
  .select(fromRoot.getUserState)
  .filter(user => user.id != null && user.logged)
  .do(user => this.store$.dispatch(...))
  ...
_

次のことを確認するために、ユーザー情報とselectedSourceIdを同時に取得することに苦労しています。

  1. ユーザーがログに記録されている（this.store$.select(fromRoot.getUserState)
  2. 次に、すべてのselectedSourceIds（this.store.select(fromRoot.getSelectedSourceIds)）を取得します
  3. アクションをディスパッチする

どうすれば入手できますか？

ngrx
7
Jordi

そのコードをセレクターに追加することは理にかなっていますか？

// Selector functions
const getProductFeatureState = createFeatureSelector<ProductState>('products');
const getUserFeatureState = createFeatureSelector<UserState>('users');

export const getCurrentProduct = createSelector(
  getProductFeatureState,
  getUserFeatureState,
  getCurrentProductId,
  (state, user, currentProductId) => {
    if (currentProductId === 0) {
      return {
        id: 0,
        productName: '',
        productCode: 'New',
        description: 'New product from user ' + user.currentUser,
        starRating: 0
      };
    } else {
      return currentProductId ? state.products.find(p => p.id === currentProductId) : null;
    }
  }
);

このコードはproduct.reducerファイルにあります。ここでは、製品とユーザーの両方の機能セレクターを定義します。

次に、製品機能とユーザー機能の両方を使用してgetCurrentProductセレクターを作成します。

15
DeborahK

これは私の解決策です：

this.store$.combineLatest(
      this.store$.select(fromRoot.getUserEntity),
      this.store$.select(fromRoot.getSelectedSourceIds),
      (store, user, selectedSourceIds) => ({user: user, selectedSourceIds: selectedSourceIds}) 
    )
    .filter((proj) => proj.user.id != null && proj.user.logged)
    .do((proj) => this.store$.dispatch({type: 'DELETE_CARDS', payload: {username: proj.user.username, tokens: proj.selectedSourceIds}}))
    .take(1)
    .subscribe();

お役に立てれば幸いです。

6
Jordi