This is an ngrx effect taken from the official docs.
@Injectable()
export class AuthEffects {
// Listen for the 'LOGIN' action
@Effect() login$: Observable<Action> = this.actions$.ofType('LOGIN')
// Map the payload into JSON to use as the request body
.map(toPayload)
.mergeMap(payload =>
this.http.post('/auth', 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' }))
);
constructor(
private http: Http,
private actions$: Actions
) {}
}
Can I make it look more like this?
import {actions$, registerEffect} from ...
const login$: Observable<Action> = actions$.ofType('LOGIN')
// Map the payload into JSON to use as the request body
.map(toPayload)
.mergeMap(payload =>
this.http.post('/auth', 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' }))
);
registerEffect(login$);
Without the class and the angular references?
The idea is to reduce(ha!) the coupling between the effects and the angular framework. And I see no technical reason for that to not be possible.