NGXS Async Actions - PullRequest
       43

NGXS Async Actions

0 голосов
/ 20 мая 2018

Я пытаюсь реорганизовать свою функцию AuthModule Angular6 с NgRX на NGXS.

У меня проблема с государством.Внутри есть асинхронное действие:

export const initialState: State = {
  error: null,
  pending: false,
};


@State<State>({
  name: 'login',
  defaults: initialState
})
export class LoginPageState {

  @Selector()
  static error(state: State) {
    return state.error;
  }

  @Selector()
  static pending(state: State) {
    return state.pending;
  }

  constructor(private authService: AuthService) {
  }

  @Action(Login)
  login({getState, patchState, setState, dispatch}: StateContext<State>, {payload}: Login) {

    console.log('login da login page', getState());
    setState({...getState(), pending: true});
    console.log('login da login page', getState());

    return this.authService.login(payload)
      .pipe(
        map((user) => {
          // setTimeout(() => {
          return dispatch([new LoginSuccess({user})]);
          // }, 10);
        }),
        catchError(err => dispatch(new LoginFailure(err))));
  }

  @Action(LoginSuccess)
  loginSuccess({setState, getState}: StateContext<State>) {
    console.log('login success');
    setState({...getState(), error: null, pending: false});
  }

  @Action(LoginFailure)
  loginFailure({setState, getState}: StateContext<State>, {payload}: LoginFailure) {
    setState({...getState(), error: payload, pending: false});
  }

​
}

Когда я отправляю действие входа в систему, оно работает, но в моем devx-файле получено: enter image description here Действие входа происходит после действия LoginSucces иесли я переключаюсь между этапами (@INIT, [авторизация] успешный вход в систему и [авторизация] вход в систему), боль всегда одинакова.(ожидающее значение не должно двигаться?)

Если я добавлю функцию setTimeout перед вызовом новой отправки:

 return this.authService.login(payload)
  .pipe(
     map((user) => {
       setTimeout(() => {
         return dispatch([new LoginSuccess({user})]);
       }, 10);
     }),
     catchError(err => dispatch(new LoginFailure(err))));

Я получу правильную сортировку своих действий в devtools и в этомВ случае, если ожидаемое значение перемещается:

enter image description here

enter image description here

Но… где я не прав?Я не думаю, что это правильный режим для использования асинхронной отправки !!

Можете ли вы помочь, пожалуйста?Спасибо

1 Ответ

0 голосов
/ 22 мая 2018

В настоящее время это связано с тем, что NGXS работает, когда родительское действие завершается только после завершения его дочерних действий.Действия публикуются в средствах разработки по завершении, чтобы они могли включать состояние по завершении, поэтому вы видите, что они выполняются в этом порядке.

Это существующая проблема в github для этого (которая будетскоро будет открыт)Смотрите этот комментарий в выпуске: https://github.com/ngxs/store/issues/139#issuecomment-390673126

...