RXJS避免嵌套多个订阅

时间:2020-05-04 10:21:18

标签: angular typescript rxjs rxjs-subscriptions

我想转换以下代码段:

 this.dataUserSubscription = this.store$.pipe(select(selectUser)).subscribe(
            user => {
                this.store$.pipe(select(selectUserData, {user}), take(1))
                    .subscribe(userData => {
                        if (userData === null) {
                            this.store$.pipe(select(selectUserManagement, {user}), take(1)).subscribe(
                                userManagement => {
                                    this.store$.dispatch(saveUserDataToStore({
                                        user,
                                        userManagement
                                    }));
                                });
                        }
                    });

通过避免嵌套订阅。我发现的所有示例都是每两个订阅。

 this.dataUserSubscription = this.store$.pipe(select(selectUser),
    switchMap(user => this.store$.pipe(select(selectUserData, {user}))))
    .subscription(userData => {
        // logic
    })

但这不是我的代码示例的适当解决方案。 为什么修复多个嵌套订阅的正确步骤?

1 个答案:

答案 0 :(得分:1)

根据RxJS最佳实践,您的第二个示例是一种完全可以接受的方法。

但是,按照NgRx最佳做法,您可以通过组合选择器来摆脱嵌套订阅。

在没有看到您的selector文件的情况下很难确切地说出做什么,但是如果您已经在商店中拥有user,那么您应该可以提取用户数据无需两次选择就可以从存储中移出。

也许是这样的:

const getDataForUser = createSelector(
    selectUser,
    selectUsers,
    (user, userDataDictionary) => userDataDictionary[user.id]
)

然后只使用一个getDataForUser选择器。