Some examples for ngrx effects

examples-for-ngrx-effects.ts

// One input, one output
@Effect()
firstAction$: Observable<Action> = this.action$.pipe(
  ofType<firstAction>('FIRST_ACTION'),
  mapTo(new SecondAction())
);

// Two inputs, one output
@Effect()
public dashboardLoadRequired$: Observable<Action> = 
  this.actions$.pipe(
    ofType( 'SIGN_IN_SUCCESS', 'OPEN_DASHBOARD'),
    mapTo( new LoadDashboardData() )
  );
 
// One input, two outputs
@Effect()
public signInSuccess$: Observable<Action> = this.actions$.pipe(
  ofType( 'SIGN_IN_SUCCESS' ),
  concatMapTo([
    new LoadDashboardData(),
    new LoadChatHistory()
  ])
);
  
// One input, no outputs
@Effect({dispatch: false})
public signInSuccess$: Observable<Action> = this.actions$.pipe(
  ofType( 'SIGN_IN_SUCCESS' ),
  tap( () => this.router.navigate(['dashboard']) )
);

// Effect with calling the service
@Effect() 
getCustomers$ = this.actions.pipe(
  // filter out the actions, except '[Customers Page] Get'  
  ofType(CustomerActionTypes.Get), 
  switchMap(() =>
    // call the service
    this.service.get().pipe(
      // return a Success action when everything went OK
      map(customers => new GetCustomersSuccess(customers)),
      // return a Failed action when something went wrong  
      catchError(error => of(new GetCustomersFailed(error))),
    ),
  ),
);

// Use selector inside the Effect, and filter out existing entity
@Effect()
getOrder = this.actions.pipe(
  ofType<GetOrder>(ActionTypes.GetOrder),
  withLatestFrom(this.store.pipe(select(getOrders))),
  filter(([{payload}, orders]) => !!orders[payload.orderId])
  mergeMap([{payload}] => {
    ...
  })
)