ngrx ofType, @ngrx/effects
The point is that the ofType is not exported in Actions class inside the ngrx/effects so you can use it like following: 1- import ofType from ngrx/effects which would be
import { Injectable } from "@angular/core";
import { Effect, Actions, ofType } from "@ngrx/effects";
import * as omid from "@ngrx/effects";
import { of } from "rxjs";
import { map, switchMap, catchError } from "rxjs/operators";
@Injectable()
export class PizzasEffects {
constructor(
private actions$: Actions,
private pizzaService: frtomServices.PizzasService
) {}
@Effect()
LoadPizzas$ = this.actions$.pipe(
ofType(pizzaActions.LOAD_PIZZAS),
switchMap(() => {
return this.pizzaService.getPizzas().pipe(
map(pizzas => new pizzaActions.LoadPizzasSuccess(pizzas)),
catchError(error => of(new pizzaActions.LoadPizzasFail(error)))
);
})
);
}
In a nutshell, when .ofType()
gets called, it subscribes to the source stream of actions and pushes matching actions to the resulting stream. So it is indeed called once.
If we look at the source code, we'll see that under the hood ofType
uses filter
operator of rxjs
library, meaning that this.action$.ofType(CREATE_TASK)
can be expanded to
this.action$.filter(action => action.type === CREATE_TASK)
Description of how filter
works can be found from rxjs
docs:
Similar to the well-known
Array.prototype.filter
method, this operator takes values from the source Observable, passes them through apredicate
function and only emits those values that yieldedtrue
.
It's worth noting that each of your effects takes an observable (this.action$
) as input and returns a new observable which is subscribed only once, when effects are initialized. That returned observable defines the way how actions from the input observable are transformed, but it does not affect the source observable itself.
In your example ofType()
method returns a new observable that "listens" to this.action$
observable and emits only actions that satisfy the condition action.type === CREATE_TASK
. Then goes the map
operator, it also returns a new observable which "listens" to the observable returned by ofType()
call and transforms each action it receives to a new value according to a projection function you pass. But all of those observables are created only once, upon initialization, and when you dispatch actions, they just "flow" through observables, get filtered and transformed.
You might also want to become more familiar with rxjs
. I would recommend you to check "You will learn RxJS" talk by André Staltz, it should give you an intuition of what observables are and how they work.
this.actions$ .ofType(CREATE_TASK) will call every time when your action get dispatched, after your reducer case get execute. like Redcucer
switch(action) {
case youractionsname.CREATE_TASK : {
// pure function logic here
}
}
First reducer will execute and then it will look into effect, if you have any effect who has type of 'CREATE_TASK'. In subscription pattern whatever you have subscribe that will be call back function and it will store in array under the hood based on condition. When you dispatch action based on condition that all function will call who meet the condition.