Ngrx/effects is not working in async with angular 2

Question

Am new to Ngrx, We got stuck with the implementation , Need some help

Architecture: We are trying to fill the store when the User is authenticated by that time am trying to redirect.

Expectation: Effects should be called as async and In ui we have to do the redirect

Problem: Redirection to Homepage is happening only after the ngrx/effect api call is done.

 this.userService.authenticateUser(this.userId.toUpperCase(), this.password, (user) => {
            this.authenticatedUser = user;                
            //Call the ngrx dispatchMethod to fill the store
            this.router.navigateByUrl("/home");
             this.ngrxGetModule_data();

 async  ngrxGetModule_data() {
        this.store.dispatch({ type: Affaire_Action.Affaire_Addstore_Login });
        //this.store.dispatch({ type: Affaire_Action.Initial_Store });
    }



@Effect()
    updateAffaireStore$: Observable<Action> = this.actions$
        .ofType(Affaire_Action.Affaire_Addstore_Login)
        .map<Action, string>(toPayload)
        .switchMap(res => this.affaireService.getAffairesSearchSuggetions('')
            //.delay(10000)
            .map(res => (
                {
                    type: Affaire_Action.Affaire_on_Success, payload: ({ "parameter": SearchSuggestion, "data": res })

                }
            )))
        .catch(error => Observable.of({ type: Affaire_Action.Affaire_on_Failure, payload: null }))

Answer 1

What are you actually trying with the this.userService.authenticateUser ? Seems like you are trying to call the function but the way you are doing is wrong. What is the return type?!!! Observable or promise.

Suggestion: You should call services on you effect and dispatch actions from effect. You can also use this.router.navigateByUrl("/home"); on your effect.