How can I return from a callback in an Angular5 effect?

@Effect() /* sends request to httpService with params as login credentials on instance of loginAction. */
login$: Observable<Action> = this.actions$
.instanceOf(LoginActions.LoginAction)
.switchMap(
action => {
return this.loginHttpService.login(action.payload)
.map( (res: any) => {
if (res && res.message !== 'Invalid Login') {
const firstName = res.firstName;
const lastName = res.lastName;
this.tokenService.setToken(res.jwt);
this.tokenService.setFirstName(firstName.charAt(0).toUpperCase() + firstName.slice(1));
this.tokenService.setLastName(lastName.charAt(0).toUpperCase() + lastName .slice(1));
this.tokenService.setId(res.id);
this.tokenService.setAvatar(firstName.charAt(0).toUpperCase() + lastName.charAt(0).toUpperCase());

const perm = ['ADMIN']
this.tokenService.setUserRoles(perm)
return Observable.create(observer => {
this.permissionsService.loadPermissions(perm, () => {
observer.next({
type: 'string'
});
return observer.complete();

})
})
}
}).catch( (e:any) => {
return Observable.of(new LoginActions.LoginFailureAction(true));
});
});


I'm trying to return from inside the loadPermissions. But I get an error:

loadPermissions

Effect "LoginEffects.login$" dispatched an invalid action


1 Answer
1

If you are trying to exit the effect without dispatching an action you need to set disaptach to false. You decorate your effect with @Effect({ dispatch: false }) and then everywhere you return an Action you need to call this.store.dispatch(/* Some Action */); yourself.

disaptach

false

@Effect({ dispatch: false })

this.store.dispatch(/* Some Action */);

@Effect({ dispatch: false })
login$: Observable<Action> = this.actions$
.instanceOf(LoginActions.LoginAction)
.switchMap(
action => {
this.loginHttpService.login(action.payload)
.map( (res: any) => {
// Logic omitted

return Observable.create(observer => {
this.permissionsService.loadPermissions(perm, () => {
observer.next({
type: 'string'
});

// Dispatch an action
this.store.dispatch(new LoginActions.LoginSuccessAction(true)));

return observer.complete();
})
});
}).catch( (e:any) => {
this.store.dispatch(new LoginActions.LoginFailureAction(true)));
});
});

constructor(private store: Store<any>) {}


Instead of creating a NOOP action, just return EMPTY with latest rxjs or empty() (if < 6.x from memory)
– maxime1992
Jun 29 at 20:38

EMPTY

empty()

But I have the this.permissionsService.loadPermissions, which has a callback. How do I dispatch from within the callback?
– Shamoon
23 hours ago

this.permissionsService.loadPermissions

Your question didn't state that you were trying to emit an action in the callback. I updated my answer.
– Teddy Sterne
23 hours ago

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.