title: How to handle a filter functionality for my ngrx store?
body: <p>How to handle a filter functionality for my store ?</p>
  
  <p>Currently it is fetching data from an external source using a service via effects.</p>
  
  <p>Once we fetch the data it will be available inside my store .</p>
  
  <p>So I want to filter out the entities in my store (local ngrx store &amp; not the backed database) based on some filter criteria.</p>
  
  <p>this is the interface of the item.</p>
  
  <pre class="lang-js prettyprint-override"><code>export interface item {
      id: string;
      name: string;
      price: number;
      location: string;
      category: string;
      ...
  }
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>// component.ts
  
  this.store.dispatch(loadItems())
  
  this.Items$ = this.store.pipe(select(selectItems))
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>
  //actions.ts
  
  export const loadItems = createAction(
      '[Item Items Component] Load Items',
    );
    export const loadItemsSuccess = createAction(
      '[Item Items/API] Load Items Success',
      props&lt;{ Items: Item[] }&gt;()
    );
    export const loadItemsFailure = createAction(
      '[Item Items/API] Load Items Failure',
      props&lt;{ error: any }&gt;()
    );
  
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>
  // effects.ts
  
  loadItems$ = createEffect(() =&gt;
  this.actions$.pipe(
    ofType(ItemActions.loadItems),
    mergeMap(action =&gt;
      this.defaultService.getContentModeration().pipe(
        map(Items =&gt; ItemActions.loadItemsSuccess({ Items })),
        catchError(error =&gt;
          of(ItemActions.loadItemsFailure({ error }))
        )
      )
    )
  )
  )
  
  
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>
  // selector.ts
  
  export const selectItemState = createFeatureSelector&lt;ItemState&gt;(
    ItemsFeatureKey
  );
  
  export const selectItems = createSelector(selectItemState, selectAll);
  
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>// reducer.ts
  
  export const ItemsFeatureKey = 'Items';
  
  export interface ItemState extends EntityState&lt;Item&gt; {
    // additional entities state properties
    error: any;
  }
  
  export const adapter: EntityAdapter&lt;Item&gt; = createEntityAdapter&lt;Item&gt;({
    sortComparer: (c1: Item, c2: Item) =&gt; {
      const compare = c1.timestamp - c2.timestamp;
      return compare &gt; 0 ? 11 : compare &lt; 0 ? 1 : 0
    },
    selectId: Item =&gt; Item.contentId,
  });
  
  export const initialState: ItemState = adapter.getInitialState({
    // additional entity state properties
    error: undefined
  });
  
  export const reducer = createReducer(
    initialState,
    on(ItemActions.loadItemsSuccess,
      (state, action) =&gt; adapter.setAll(action.Items, state)
    ),
    on(ItemActions.loadItemsFailure,
      (state, action) =&gt; {
        return {
          ...state,
          error: action.error
        }
      }
    ),
  
    export const {
      selectIds,
      selectEntities,
      selectAll,
      selectTotal,
    } = adapter.getSelectors();
  
  </code></pre>
  
  <p>Currently I am using a filter pipe. but that is not feasible. It is slowing down my app. I  want to leverage the potential of a store which handles the state</p>
  
  <p>So I want to filter the items(entities) in the store based on either by name, price, category or by combined name, price, category. Just like regular filters we see on sites like amazon, flipkart etc...</p>
  
  <p><strong>All solutions out there are old I think(some of them uses switch statements, but recent ngrx selectors on() method &amp; actions are also different from previous versions)</strong>.</p>
  
  <p><strong>can someone please help?</strong></p>
  
  <p>If you don't have time to answer please tell whether this is a dead end or not. So that I may continue using pipes and stop searching further.</p>