Angular 根据来自上一个操作的数据分派操作

在前一个操作完成后，我正在努力调度一个操作

我想做的是分派一个动作（比如getDetails），然后使用来自这个动作的数据分派另一个动作（比如GetUserList）。然后，当最后一个操作完成时，我想导航到一个路由

我不知道如何将这些行动联系起来。这是我在我的组件上直接尝试的（我听说这种逻辑必须在效果中，所以我在这里的目的只是展示我所做的）：

我采取的方法正确吗？在这方面有一些最佳实践吗

提前谢谢

更新 通过执行新操作尝试@calimoose解决方案，执行以下操作：

this.actions$.pipe(
            ofType(ProfileActions.populateApiInfo),
            flatMap((data) => of(DetailsActions.getDetails({ bt: data.bt }))),
            withLatestFrom(this.store.select(fromApp.selectClientId)),
            flatMap(([_, clientId]) => of(ProfileActions.getUsersList({ clientId }))),
            withLatestFrom(this.store.select(fromApp.selectPbList)),
            map(([_, pbList]) => {
                return ProfileActions.populateApiInfoSuccess();
            })
        ));

但它似乎没有分派getDetails和getUsersList操作。接线员的链子有问题吗

更新2 按照@Friso的建议尝试，但未调度getDetails和getUsersList操作

   this.actions$.pipe(
            ofType(ProfileActions.populateApiInfo),
            concatMap((data) =>
                of(DetailsActions.getDetails({ bt: data.bt }))
                    .pipe(
                        withLatestFrom(this.store.select(fromApp.selectClientId)),
                        concatMap(([_, clientId]) =>
                            of(ProfileActions.getUsersList({ clientId }))
                                .pipe(
                                    withLatestFrom(this.store.select(fromApp.selectPbList)),
                                    map(([_, pbList]) => {
                                        return ProfileActions.populateApiInfoSuccess();
                                    })
                                )
                        ),
                    )
            )
        ));

---

在这里，使用返回下一个动作的效果是一个更好的选择

如果您对概念不确定，请务必阅读ngrx文档：

withLatestFrom

会立即开始侦听数据，而不考虑将要执行的操作，因此您可能需要使用展平运算符来防止发生这种情况：

.pipe(
  ofType(thePreviousAction),
  concatMap(action => of(action).pipe(
    withLatestFrom(this.store.pipe(select(getYourData)))
  )),
  // do stuff
)

---

@Effect

要求您返回新操作。在某些情况下，您可能不想这样做。您可以使用

{dispatch:false}

忽略该要求。

也许您可以使用rxjs concatMap操作符并返回可观察的操作？请参阅更新的响应，即使使用concatMap它也不起作用。getDetails和getUsersList操作未被调度，根据设计，这应该是合理的，因为效果会执行一个操作，执行一些工作，然后返回一个新操作。事实上，唯一分派的操作是populateApiInfo和populateApiInfoSuccess。我不知道是否有办法做我想做的事。

getUsersList$ = createEffect(() => this.actions$.pipe(
    ofType(DetailsActions.getDetails),
    withLatestFrom(*/ insert clientId Selector here */),
    map([_, clientId], => of(ProfileActions.getUsersList({ clientId }))
    )
  );

.pipe(
  ofType(thePreviousAction),
  concatMap(action => of(action).pipe(
    withLatestFrom(this.store.pipe(select(getYourData)))
  )),
  // do stuff
)