セレクタを作成してngrxストアからidを指定してアイテムを選択する方法

Question

セレクタについてngrxストアのdocumentationを読み、アイテムIDで1つのアイテムを選択するためにセレクタを作成する方法を理解する必要があります。 selectAllItemsセレクタからすべてのアイテムを取得すると、すでにストアサブスクリプションの一部としてこれを行うことができますが、ストア内のアイテムのリストから特定のアイテムを選択する方法を理解する必要があります。私の主な理由は、createSelectorが私が恩恵を受けたいパフォーマンスの向上を提供していることです。ここで

は私のコードです：

import { AppState, Item } from '../../shared/models/index'; 
import { createSelector } from '@ngrx/store'; 

export const selectItems = (state: AppState) => state.eventsState; 

export const selectAllItems = createSelector(selectItems, (allItems: { items: Item[] }) => { 
    if (allItems && allItems.items) { 
    return allItems.items.filter((item: Item) => (!item.active && !item.closed)); 
    } else { 
    return allItems.items; 
    } 
}); 

その後、私のコントローラで私は項目に必要な取得するidでフィルタリング：

this.store.select(selectors.selectAllItems) 
    .filter(data => data !== null) 
    .subscribe(allItems => { 
    this.item = allItems.filter(item => { 
     return item.id === this.navParams.data.id; 
    }); 
    }); 

を私はその特定の項目のためのセレクタを作成できるようにしたいと思いますそのように使用してください：

this.store.select(selectors.selectItemById(this.navParams.data.id)) 
    .filter(data => data !== null) 
    .subscribe(selectedItem => { 
    this.item = selectedItem; 
    }); 

助けていただければ幸いです。

Answer 1

いくつかの調査の後、私は自分の問題を解決しました。私は所望のselectItemByIdセレクタを得るためにファクトリ関数を使用しました。ここに私の新しいセレクタは次のとおりです。

import { AppState, Item } from '../../shared/models/index'; 
import { createSelector } from '@ngrx/store'; 

export const selectItems = (state: AppState) => state.eventsState.items; 

export const getItemById = (id) => createSelector(selectItems, (allItems) => { 
    if (allItems) { 
    return allItems.find(item => { 
     return item.itemId === id; 
    }); 
    } else { 
    return {}; 
    } 
}); 

は、その後、私は私のコントローラにしなければならないすべては、このセレクタを呼び出し、それを店の外にアイテムを取得するために必要なアイテムのIDを渡すことです：

import * as selectors from '../../app/store/selectors'; 

this.store.select(selectors.getUnitById(id)) 
    .subscribe((item) => { 
    this.item = item; 
    });