Action methods with async not triggering next Mutation Action. about store

[xmlking]

workaround for my use case: wrap the action function with fromPromise

import {Store, Action, Mutation} from 'ngxs';
import {OAuthService} from "angular-oauth2-oidc";
import {Login, LogoutSuccess, LoginSuccess, Logout} from "./auth.events";
import {fromPromise} from "rxjs/observable/fromPromise";

@Store({
  defaults: {
    isLoggedIn: false,
    profile: {}
  }
})
export class AuthStore {
  constructor(private oauthService: OAuthService) {
  }

  @Mutation(LoginSuccess)
  loginSuccess(state, {payload}) {
    state.isLoggedIn = payload.isLoggedIn;
    state.profile = payload.profile;
  }

  @Mutation(LogoutSuccess)
  logoutSuccess(state, {payload}) {
    state.isLoggedIn = false;
    state.profile = {};
  }

  @Action(Logout)
  logout(state, {payload}) {
    this.oauthService.logOut();
    return new LogoutSuccess()
  }

  //not working 
  @Action(Login)
  async login(state, { payload }) {
    // this.oauthService.initImplicitFlow();
    const profile = await this.oauthService.fetchTokenUsingPasswordFlowAndLoadUserProfile('sumodemo', 'sumodemo');
    const isLoggedIn = true;
    return new LoginSuccess({isLoggedIn, profile});
  }

  @Action(Login)
  workAround(state, { payload }) {
    return fromPromise( this.login(state, { payload }))
  }
}

[amcdnl]

Thats odd cuz it calls forPromise under the hood. See: https://github.com/amcdnl/ngxs/blob/master/src/ngxs.ts#L83

[deebloo]

@xmlking in your add method you don't have an await. Im not an expert with async functions but don't you need it to resolve or am I missing something?

[amcdnl]

No I think if you define async it automatically converts the results into a promise.

[deebloo]

@amcdnl hmmmm im not sure if that is the case. to the internet!

[xmlking]

@amcdnl are you able to reproduce this issue ?

[abalad]

I'm having the same problem, I'm trying to fire a Mutation from within an action, but Mutation does not run.

import { Store, Mutation, Action } from 'ngxs';
import { AuthenticationService } from '../../shared/resources/authentication/authentication.service';
import { Login, LoginSuccess, LoginFailure } from '../actions/login.action';
import { LoginState } from '../reducers/login/login.state';
import { InitialState } from './login.state';

@Store({
  defaults: InitialState
})
export class LoginStore {

  constructor( private authenticationService: AuthenticationService ){}

  @Mutation(Login)
  load(state: LoginState, action: Login) {
    return {
      ...state,
      error: null,
      pending: true
    };
  }

  @Mutation(LoginSuccess)
  loginSuccess(state: LoginState, action: LoginSuccess) {
    return {
      ...state,
      error: null,
      pending: false
    };
  }

  @Mutation(LoginFailure)
  loginFailure(state: LoginState, action: LoginFailure) {
    console.log(state,  action);
    return {
      ...state,
      error: action.payload,
      pending: false
    };
  }

  @Action(Login)
  login(state, { payload }){
    return this.authenticationService.authenticate(payload)
      .then( (response) => { console.log(response); } )
      .catch( (error) =>  new LoginFailure(error.message)  ); // HE WILL NOT DISPATCH A MUTATION

  }

}

[amcdnl]

I wonder if its related to the error?

[amcdnl]

Side note: I'm gonna put in place a global error handling system

[abalad]

@amcdnl So it's similar, because my request this.authenticationService.authenticate(payload) also returns a promisse async.

Note: I use another library(Not the Angular standard) to make requests, and she works with promisses

[perjansson]

I'm also seeing this problem where a Mutation is not called if returned from an async / await Action.

[amcdnl]

Fixed in 1.5.3