Selectors and Effects in NgRx

This lesson covers selectors and effects, crucial parts of NgRx for efficient state management in Angular.

What are Selectors?

Selectors allow you to efficiently retrieve specific pieces of state from the store, optimizing data access.

Creating Selectors

Create selectors using createSelector() function to select data from state efficiently:

export const selectUser = createSelector(
  (state: AppState) => state.user,
  (user) => user.details
);

Using Selectors in Components

Selectors help you access store data easily within components:

this.store.select(selectUser).subscribe(user => console.log(user));

What are Effects?

Effects handle side effects in NgRx, such as HTTP requests, by listening for actions and performing asynchronous operations.

Installing Effects

Install NgRx Effects using:

npm install @ngrx/effects --save

Creating Effects

Effects handle side effects like HTTP requests triggered by actions:

loadUser$ = createEffect(() =>
  this.actions$.pipe(
    ofType(loadUser),
    mergeMap(() => this.userService.getUser().pipe(
      map(user => loadUserSuccess({ user }))
    ))
  )
);

Registering Effects

Register effects in your module to enable them in your application:

EffectsModule.forRoot([UserEffects])

Summary

You now understand selectors and effects in NgRx, empowering you to handle state and side-effects efficiently. Excellent job!