Obervable.create not triggering in angular5 with ngrx - angular5

Question

My effect is:
#Effect({dispatch: false}) /* 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 permissions = res.roles
this.tokenService.setUserRoles(permissions)
return Observable.create(observer => {
console.log('in observable')
this.permissionsService.loadPermissions(permissions, () => {
observer.next({
type: 'string'
});
console.log('here we go')
this.store.dispatch(new LoginActions.LoginSuccessAction({user: res}))
return observer.complete();
})
})
}
})
.catch( (e:any) => {
this.store.dispatch(new LoginActions.LoginFailureAction(true));
return Observable.create(observer => {
return observer.complete();
})
});
});
The in observable log never fires. What am I doing incorrectly?

Answer 1

Sorry but I don't understand why you need to create a new Observable.
In this kind of situation, here is what I'm used to do :
#Effect()
login$ = this.actions$
.ofType<LoginAction.LoginAction>(LoginActions.LOGIN_ACTION)
.pipe(
map(action => action.payload),
switchMap(payload => {
return this.loginHttpService.login(payload)
.map(userLogged => {
return new LoginActions.LoginSuccessAction({user: userLogged});
})
.catch(error => {
return new LoginActions.LoginFailureAction(true);
});
})
);
#Effect()
loginSuccess$ = this.actions$
.ofType<LoginAction.LoginSuccess>(LoginActions.LOGIN_SUCCESS)
.pipe(
map(action => action.payload),
switchMap(payload => {
return this.permissionsService.loadPermissions(payload.user)
.map(permissions => {
return new LoginActions.PermissionsLoaded(permissions);
})
.catch(error => {
return new LoginActions.PermissionsLoadingFailed();
})
})
);
If existing loadPermissions method doesn't return an Observable, a new method as below can do the job :
loadPermissions(user): Observable<Permissions> {
return Observable.create(observer => {
loadPermissionsWithCallback(user, (response) => {
observer.next(response);
return observer.complete();
});
});
}
It's a chain of actions. LOGIN_ACTION -> LOGIN_SUCCESS -> PERMISSIONS_LOADED.
User is fully logged when action PERMISSIONS_LOADED is dispatched.
Each service method (login and loadPermissions) should return an Observable, and it's the case with new HttpClientModule.
Of course, it's just a simplified and incomplete example... Hope this will help you a little bit.