//app.effect.ts
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import {addCityToIndex, returnCityToIndex} from './reducers/form.reducer';
import { map } from 'rxjs/operators';
import { HttpService } from './services/http.service';
@Injectable()
export class AppEffects {
effect$ = createEffect(() =>
this.actions$.pipe(
ofType(addCityToIndex),
map(data => returnCityToIndex(data))
), {});
constructor(private actions$: Actions, private http: HttpService) {}
}
I need to update data, which I have in addCityToIndex (array) via http service - get property of array element, make request to service, update element and pass new array to returnCityToIndex.
Is it possible and if ok, then how to transform data inside ngrx effect?
Based on documentation
You can use a action to trigger a request and return another action witch will update your state, and your component will recive the new data in selector when the data be updated.
Ex:
login$ = createEffect(() =>
this.actions$.pipe(
ofType(LoginPageActions.login),
exhaustMap(action =>
this.authService.login(action.credentials).pipe(
map(user => AuthApiActions.loginSuccess({ user })),
catchError(error => of(AuthApiActions.loginFailure({ error })))
)
)
)
);