From bbd44e6174f3ea0fe486fe8dc80aae0b3b1a34dd Mon Sep 17 00:00:00 2001 From: Armen Vardanyan Date: Thu, 16 Mar 2023 21:14:42 +0400 Subject: [PATCH] docs(store): add example of createFeature extraSelectors (#3787) closes #3775 --- .../content/guide/store/feature-creators.md | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/projects/ngrx.io/content/guide/store/feature-creators.md b/projects/ngrx.io/content/guide/store/feature-creators.md index b807da7ace..cf8cd4480a 100644 --- a/projects/ngrx.io/content/guide/store/feature-creators.md +++ b/projects/ngrx.io/content/guide/store/feature-creators.md @@ -73,6 +73,47 @@ export const selectBookListPageViewModel = createSelector( ); +## Providing Extra Selectors + +`createFeature` also can be used to provide extra selectors for the feature state with the `extraSelectors` option: + + +import { createFeature, createReducer, on } from '@ngrx/store'; +import { Book } from './book.model'; + +import * as BookListPageActions from './book-list-page.actions'; + +interface State { + books: Book[]; + query: string; +} + +const initialState: State = { + books: [], + query: '', +}; + +export const booksFeature = createFeature({ + name: 'books', + reducer: createReducer( + initialState, + on(BookListPageActions.search, (state, action) => ({ + ...state, + query: action.query, + })), + ), + extraSelectors: ({ selectQuery, selectBooks }) => ({ + selectFilteredBooks: createSelector( + selectQuery, + selectBooks, + (query, books) => books.filter(book => book.title.includes(query)), + ), + }), +}); + + +The `extraSelectors` option accepts a function that takes the generated selectors as input arguments and returns an object of all the extra selectors. We can use it to define as many extra selectors as we need. + ## Feature registration Registering the feature reducer in the store can be done by passing the entire feature object to the `StoreModule.forFeature` method: