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。

我实际上已经通过在状态中放置相同的代码（几乎没有修改c）来完成它，但我觉得它太乱了而且不是正确的方式所以把它放在组件中而不是但我无法让它再次发挥作用。

Answer 1

我就是这样做的：

当用户执行操作时，只需使用操作参数（如果有）进行调度，例如[![enter image description here][6]][6]。通常，订阅此调度操作不是必需的，我发现它使代码看起来也很混乱。
new MyAction()函数处理内容并可选择调度成功/失败操作（例如@Action，MyActionSuccess或其他一些有意义的操作）。如果此行动只能有一个结果，那么就不要打扰成功 - 完成此行动是成功的。
为了处理成功（等等）执行操作，我订阅action handlers以获取路由/重定向内容。这些将由组件根据组件的生命周期进行订阅/取消订阅。（例如MyActionFailed，ngOnInit()）。

说实话，我不知道这是正确的还是最好的方式，我现在该怎么做。

Answer 2

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])

Ngxs - 我如何连锁行动？

2 个答案: