There is no mechanism for injecting services into reducers. Reducers are supposed to be pure functions. Instead, you should use ngrx/effects – which is the mechanism for implementing action side-effects. Effects listens for particular actions, perform some side-effect and then (optionally) emit further actions. Typically, you would split your action into three: the request; the … Read more
Edit: NgRx effects fire after all reducers for that action have executed. That order is guaranteed. The reduced state is the payload of your effects. Found the following comment in lifecycle_hooks.d.ts in the NgRx effects-build project: By default, effects are merged and subscribed to the store. Implement the OnRunEffects interface to control the lifecycle of … Read more
By default, an ngrx/effect dispatches an action. If you want an effect to be ‘fire-and-forget’, all you need to do is add {dispatch: false} as an argument to the @Effects() decorator. From the @ngrx/effects docs: Observables decorated with the @Effect() decorator are expected to be a stream of actions to be dispatched. Pass { dispatch: … Read more
The choosen answer does not work with rxjs6 any more. So here is another approach. Although I prefer filtering for most cases as described in an another answer, using flatMap can sometimes be handy, especially when you are doing complex stuff, too complicated for a filter function: import { Injectable } from ‘@angular/core’; import { … Read more
Its used as an optimization step for store slices selection. For example, if you return some heavy computation result for some store slice, then using createSelector will do memoization which means it will keep track of last input params to selector and if they are the same as current ones, it will return last result … Read more
I am new to RXJS but what about this. You can remove {dispatch: false} if you change the tap to a switchMap. @Effect({dispatch: false}) public waitForActions(): Observable<any> { const waitFor: string[] = [ SomeAction.EVENT_1, SomeAction.EVENT_2, SomeAction.EVENT_3, ]; return this._actions$ .pipe( ofType(…waitFor), distinct((action: IAction<any>) => action.type), bufferCount(waitFor.length), tap(console.log), ); }
The answer for the navigation scenario is your b answer @Effect navigateHome$: any = this.updates$ .whenAction(LoginActions.LOGIN_SUCCEEDED) .do(this.router.navigate(‘/home’)) .ignoreElements(); Explanation: You react to the LOGIN_SUCCESS, and because the router doesn’t return a new action, we need to stop the propagation of the stream, which we do by filtering everything. If you forget to filter, the router … Read more
There are different ways of doing this. First of all you can keep a hasLoaded: boolean property in the state. Then you can check this before you make the service get call. ngOnInit() { this.store.select(getHasLoaded) .take(1) .subscribe(hasLoaded => { if (!hasLoaded) this.store.dispatch(new countries.Load()); } } Another option is to let your @Effect check the hasLoaded … Read more
Here is good answer from Reddit (Angular2+ community). It’s from a developer who tested both and switched to NGXS. I would like to share my experience. We have a medium-large enterprise app. We started with NGRX, but it quickly became clear that NGRX code is much difficult to understand and write to teammates. NGRX is … Read more
From this blog post: https://timdeschryver.dev/blog/parameterized-selectors As of NgRx 6.1 selectors also accepts an extra props argument. Which means you can now define a selector as the following: export const getCount = createSelector( getCounterValue, (counter, props) => counter * props.multiply ); this.counter = this.store.pipe( select(fromRoot.getCount, { multiply: 2 }) ); Ah … but rereading your question, … Read more