Attempting to incorporate Effects into my ngrx state manager has been a challenge. I am currently utilizing Angular v5.2.1, ngrx v4.1.1, and rxjs v5.5.6.
I experimented with the "older" approach, for instance:
@Effect() login$: Observable<Action> = this.actions$.ofType('LOGIN')
.mergeMap(action =>
this.http.post('/auth', action.payload)
// If successful, dispatch success action with result
.map(data => ({ type: 'LOGIN_SUCCESS', payload: data }))
// If request fails, dispatch failed action
.catch(() => of({ type: 'LOGIN_FAILED' }))
);
However, I encountered an error stating
Property 'mergeMap' does not exist on type 'Actions<Action>'pipe method. The issue arises when attempting to import the ofType operator.
// ...
import { Action } from '@ngrx/store';
import { Effect, Actions, ofType } from '@ngrx/effects';
import { map, mergeMap, catchError } from 'rxjs/operators';
import { of } from 'rxjs/observable/of';
@Injectable()
export class WifiEffects {
@Effect()
getWifiData: Observable<Action> = this.actions$.pipe(
ofType(WifiTypes.getWifiNetworks),
mergeMap((action: GetWifiNetworks) =>
this.mapService.getWifiNetworks().pipe(
map((data: WifiNetworks) => new GetWifiNetworksSucc(data)),
catchError(() => of(new GetWifiNetworksErr()))
)),
);
constructor (
private actions$: Actions,
private mapService: GoogleMapDataService
) {}
}
An error message is displayed saying
Module '".../node_modules/@ngrx/effects/effects"' has no exported member 'ofType'.