Ngxs - 我如何链接操作？

Posted 2023-02-19

【中文标题】Ngxs - 我如何链接操作？

【英文标题】：Ngxs - How do I chain actions?

【发布时间】：2018-11-16 07:59:46

【问题描述】：

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

当点击注册按钮时，会执行：

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

我实际上已经通过将相同的代码放入 state 中来完成它（对 c 的修改很少），但我觉得它太乱而且不是正确的方法所以把它放在组件中，但我不能它再次起作用。

【问题讨论】：

我会说值得看看 ngxs 的路由器插件。 ngxs.gitbook.io/ngxs/plugins/router

【参考方案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])

【参考方案2】：

这就是我的做法：

当用户执行一个动作时，只需发送动作参数（如果有的话），例如new MyAction()。通常，不需要订阅这个派发的动作，我发现它也会让代码看起来很乱。 @Action 函数处理内容并可选择调度成功/失败操作（例如MyActionSuccess、MyActionFailed 或其他一些有意义的操作）。如果此操作只能有一个结果，则不必费心发送成功 - 完成此操作即为成功。 为了处理成功（等等...）操作的执行，我订阅了action handlers 以获取路由/重定向内容。这些将由组件根据组件的生命周期订阅/取消订阅。 （例如ngOnInit()、ngOnDestroy()）。

说实话，我不知道这是正确还是最好的方法，只是我现在的做法。

【讨论】：

谢谢。现在会做这样的事情。

【参考方案3】：

您可以使用concatMap 它是rxjs 运算符

example.pipe(
      concatMap(() => this.store.dispatch(new FirstAction())),
      concatMap(() => this.store.dispatch(new SecondAction())),
      concatMap(() => this.selectorDependOnAction$)).subscribe((res) => 
        //anything you want to do it
      );
  

concatMap的一些资源

Official docs Learnrxjs In Depth Dev source code in github