Angular NGRX / Tips and code examples

You can learn ngrx by watching the lesson of Todd Motto here. It is the most complete and linear way to learn ngrx. You should do this before diving into more precise topics.

Dispatch several actions from the same effects

Use of ngrx/entity

NGRX effects anti patterns

A quoted article on using effects

React to query success with a snackbar, confirm

Good tutorial that explain the refactoring of a component in ngrx

And a tutorial to put snackbar management in store

Update ngrx version 5

Using ngrx entity

Hot and cold observable

Testing ngrx

Marble test

Other uses of ngrx effects

Article that list different use case for effects

Filter selector in component instead of creating a new selector

  getLines(): Observable<Lines[]> {
    return this.store
      .select(getProjecLines)
      .pipe(
        map(lines =>
          lines.filter(
            line => line.status === true,
          ),
        ),
      );
  }

Listening to actions dispatch in component

To prevent creating a boolean of the state of a completion in reducer. You can subscribe to the action dispatch the same way a reducer do.

showWarning() {
    return this.appActions.pipe(
      ofType(actions.ADD_LINES_SUCCESS),
      map(
        (action: actions.AddLinesSuccess) =>
          action.payload,
      ),
      takeUntil(this.onDestroy$),
      tap(({ lines }) => {

PreviousNGRX NextAngular new Redux (alternative to ngrx)

Last updated 4 years ago

Was this helpful?