ngrx

Why @Effects?

In a simple ngrx/store project without ngrx/effects there is really no good place to put your async calls. Suppose a user clicks on a button or types into an input box and then we need to make an asynchronous call. The dumb component will be the first to know about this action from the user, and it’s handler will be called when the button is actually clicked. However, we don’t want to put the logic to do our async call right in the dumb component since we want to keep it dumb! The only thing in the dumb component’s handler is it’s @Output emitter emitting an event to the smart component telling it that the button was clicked. Then the smart component gets the event and it’s handler function is triggered, but we don’t want to put the async login right in there because we want to keep it lean and only dipatching actions to our store so that the store can modify the state! Ok… but the store only handles actions in the reducer, and reducer are meant to be pure functions so where are we supposed to logically put our async calls so that we can put their response data in the store? The answer, friends, is @Effects! You can almost think of your Effects as special kinds of reducer functions that are meant to be a place for you to put your async calls in such a way that the returned data can then be easily inserted into the store’s internal state for the application.

what’s effects

At it’s core, the Effects Class in simply just an Angular 2 Service:

In Angular 2 a service is just a regular old TypeScript class with the @Injectable metadata, and when working with @Effects you make a single “Effect Class” or “Effect Service” that then contains various @Effect functions, each corresponding to an action dispatched by your ngrx store.

sample

@Effect() update$ = this.action$
    .ofType('SUPER_SIMPLE_EFFECT')
    .switchMap( () =>
      Observable.of({type: "SUPER_SIMPLE_EFFECT_HAS_FINISHED"})
    );

Were using the TypeScript metadata to label our variable update$ (the $ is commonly used as a suffix for variables whose value is an observable) as an “ngrx effect” that will be triggered when we dispatch actions with the store (the same was we always send actions to the reducer or reducers). Then we see “this.action$.ofType(‘SUPER_SIMPLE_EFFECT’)”. Remeber, we’re translating the dispatched event into an observable, so .ofType means your taking in an observable and then returning the observable only if it is of that type.

• 2024 15
• 2023 101
• 2022 53
• 2021 19
• 2020 25
• 2019 7
• 2018 39
• 2017 38
• 2016 50