angular - Ngxs - 如何链接操作？

Question

我想为我的注册做这样的事情。

单击注册按钮时，将执行以下操作:

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 操作从 http 请求返回 Observable。
2)然后订阅它，如果请求成功，则触发 RegisterSuccess(我希望它从状态返回一个项目)。如果请求失败，则触发 RegisterFailed。

我实际上已经通过在 state 中放入相同的代码(几乎没有修改 ofc)来完成它，但我觉得它太乱而且不是正确的方法所以把它放在组件中，但我不能让它再次工作.

Answer 1

docs建议您执行以下操作:

对于同步操作:

return ctx.dispatch(new TakeAnimalsOutside());

对于异步操作:

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

有趣的这与 dispatch是你可以做的dispatch([new Action1(), new Action2(), ...etc])