NgRx Feature Creator Function

The createFeature function in NgRx simplifies state management in Angular applications by reducing boilerplate code and improving readability. It allows developers to define state, actions, reducers, and selectors easily, and supports additional selectors through the extraSelectors option.

What is a Feature in NgRx?

In NgRx, a feature is a slice of the application state that is managed by a specific reducer and is often related to a specific domain or module of your application. For instance, in an e-commerce application, you might have features like products, cart, and user.

Introducing the createFeature Function

The createFeature function in NgRx is a utility that simplifies the creation and management of feature states. It provides a more concise and readable way to define a feature, its initial state, and the associated reducer.

Benefits of Using createFeature

• Simplification: Reduces boilerplate code by combining multiple steps into a single function.
• Clarity: Enhances code readability and maintainability by providing a clear and structured way to define features.
• Integration: Works well with other NgRx functions and utilities, making it easier to manage complex state logic.

How to Use createFeature

It accepts an object containing a feature name and a feature reducer as the input argument:

1
import { createFeature, createReducer, on } from '@ngrx/store';
2
import { LoadBooksActions } from './actions';
3

4
export const initialState: State = {
5
  books: [],
6
  isLoading: false,
7
  query: '',
8
};
9

10
export const booksFeature = createFeature({
11
  name: 'books',
12
  reducer: createReducer(
13
    initialState,
14
    on(
15
      LoadBooksActions.loadBooksSuccessful,
7 collapsed lines
16
      (state, { books }): State => ({
17
        ...state,
18
        books,
19
      }),
20
    ),
21
  ),
22
});

1
export const appConfig: ApplicationConfig = {
2
  providers: [provideStore(), provideState(booksFeature)],
3
};

An object created with the createFeature function includes a feature name, a feature reducer, a feature selector, and selectors for each property of the feature state. All generated selectors have the “select” prefix, and the feature selector has the “State” suffix. For example, if the feature name is “books” the feature selector is named selectBooksState.

1
const { name, reducer, selectBooksState, selectBooks, selectIsLoading, selectQuery } = booksFeature;

The generated selectors can be used on their own or as building blocks to create other selectors.

1
import { createSelector } from '@ngrx/store';
2

3
export const selectBookListPageViewModel = createSelector(
4
  booksFeature.selectBooks,
5
  booksFeature.selectLoading,
6
  (books, loading) => ({ books, loading }),
7
);

The createFeature function can also provide additional selectors for the feature state using the extraSelectors option

1
import { createFeature, createReducer, on } from '@ngrx/store';
2

3
export const initialState: State = {
4
  /** **/
5
};
6

7
export const booksFeature = createFeature({
8
  name: 'books',
9
  reducer: /** **/,
10
  extraSelectors: ({ selectQuery, selectBooks }) => ({
11
    selectFilteredBooks: createSelector(selectQuery, selectBooks, (query, books) =>
12
      books.filter((book) => book.title.includes(query)),
13
    ),
14
  }),
15
});

The extraSelectors option accepts a function that takes the generated selectors as input and returns an object containing any additional selectors. This allows us to define as many extra selectors as needed.

Useful Links

• GitHub - Source Code
• NgRx - Feature Creators
• Angular NgRx - How to use Feature Creator