Ngxs - Как мне цеплять действия? - PullRequest
Новая
       34

Ngxs - Как мне цеплять действия?

0 голосов
/ 06 июня 2018

Я хочу сделать что-то подобное для своей регистрации.

При нажатии кнопки регистрации это будет выполнено: 

this.store.dispatch(new Register(user))
    .subscribe(response => {
      localStorage.setItem('token', JSON.stringify(response.token));
      let redirectUrl = this.store.dispatch(new RegisterSuccess(response));

      if (redirectUrl) {
        this.router.navigate([redirectUrl]);
      } else {
        this.router.navigate(['/home']);
      }
    }, error => {
      this.store.dispatch(new RegisterFailed());
    });

Состояние: 

  @Action(Register)
  register({ patchState }: StateContext<AuthenticationStateModel>, { payload }: Register) {
    patchState({
      isLoading: true
    });

    return this.authenticationService.register(payload);
  }

  @Action(RegisterFailed)
  registerFailed({ patchState }: StateContext<AuthenticationStateModel>) {
    patchState({
      isLoading: false
    });
  }

  @Action(RegisterSuccess)
  registerSuccess(sc: StateContext<AuthenticationStateModel>, { payload }: RegisterSuccess) {
    sc.patchState({
      user: payload.user,
      token: payload.token,
      isAuthenticated: true,
      isLoading: false,
    });

    return sc.getState().redirectUrl;
  }

1) Я хочу, чтобы действие Register возвратило Observable из http-запроса.
2) Затем подпишитесь на него, если запрос выполнен успешно, запустите RegisterSuccess (который я хочу, чтобы он возвратил элемент из состояния).Если запрос не выполнен, запустите RegisterFailed.

На самом деле я уже сделал это, поместив тот же код в состояние (с небольшими изменениями в c), но я чувствую, что он слишком запутанный и не совсем корректный способ, поэтомувместо этого поместите его в компонент, но я не могу заставить его работать снова.

Ответы [ 2 ]

0 голосов
/ 15 ноября 2018

В документах предлагается сделать следующее:

Для синхронных действий:

return ctx.dispatch(new TakeAnimalsOutside());

Для асинхронных действий:

return this.animalService.feed(action.animalsToFeed).pipe( ... mergeMap(() => ctx.dispatch(new TakeAnimalsOutside()))

Интересное это с dispatch в том, что вы можете сделать dispatch([new Action1(), new Action2(), ...etc])

0 голосов
/ 08 июня 2018

Вот как я это делаю:

  • Когда пользователь выполняет действие, просто отправьте его с параметрами действия (если они есть), например new MyAction().Как правило, подписка на это отправленное действие не обязательна, и я считаю, что это также делает код слишком грязным.* или другое значимое действие).Если для этого действия может быть только один результат, не отправляйте сообщение об успешном завершении - завершение этого действия - это успех.
  • Для обработки успешного (и т. Д. ...) выполнения действий я подписываюсь на обработчики действий для маршрутизации / перенаправления.Они будут подписаны / отписаны компонентом в зависимости от его жизненного цикла.(например, ngOnInit(), ngOnDestroy()).

Если честно, я не знаю, является ли это правильным или лучшим способом, как я это делаю сейчас.

...