Question

请让我提供一些背景信息：

在我的应用程序中，我有一个＆＃34;功能列表＆＃34;。功能具有ID和状态（已激活：布尔值）。我在ngrx商店内管理这些功能。它基本上是这些功能的一个阵列。必须从服务器获取这些功能，并且可以在运行时更改这些功能。应用程序启动后和其他事件后，商店会更新。角度组件观察这些特征。大多数过滤器都是按州（因此大多数只对活动功能感兴趣）。要激活功能，组件需要调度ACTIVATE_FEATURE操作，或者特定URL必须处于活动状态。一些功能在URL路径上注册，而其他功能在URL参数上注册。

我已经使用ngrx路由器商店观察了URL。我还能够确定必须根据URL激活哪个功能。

现在问题：

我正在考虑在路由器状态上使用ngrx副作用激活一个功能，如下所示：

@Effect()
private routerEffect = this.actions$.ofType(ROUTER_NAVIGATION)

然后查看有效负载并调度ACTIVATE_FEATURE操作，以便我的功能减少器将给定功能设置为active: true。但事情就是这样：如果商店还没有包含这个功能怎么办？或者从不？如果用户导航到特定的URL，那么这总是很好，但如果使用与URL匹配的功能更新商店，则应在加载后激活该功能。即使商店仍在加载，也必须可以更改URL。一旦URL与其条件不匹配，必须停用该功能。

我正在尝试这样的事情，但我根本不知道如何处理这个......

@Effect()
private routerEffect = this.actions$.ofType(ROUTER_NAVIGATION)
    .map((nav: RouterNavigationAction<fromRouter.State>) => nav.routerState.data.featureIdToActivate)
    .withLatestFrom(this.store.select(fromFeatures.selectAllFeatures)) // this store holds an array of features
    // now what?? Is this even correct?
    // i would need to dispatch something like {type: 'ACTIVATE_FEATURE', payload: featureIdToActivate}

即使我设法等待商店包含所需的功能，如何在URL更改时取消等待？

非常感谢任何建议！谢谢！

Answer 1

以下内容会对您有所帮助吗？

@Effect()
router.events
    .pipe(
        filter(event => event instanceof NavigationEnd) // or whatever you wish
        switchMap((event) => {
            return store
                .pipe(
                    map((state) => {
                        const featureId = 
                            getFeatureIdToActivate(event);
                        return state.features.find(f => f.id === featureId);
                    }),
                    filter(feature => feature != null),
                    map(feature => new ActivateFeatureAction(feature))
                );
        })
    );

在这里，我们正在收听路由器的导航结束事件或您想要的任何类型的事件。

对于每个事件，我们将switchMap切换到商店（意味着任何新事件都会取消旧事件）。

在switchMap内部，您可以使用逻辑来决定要激活哪个功能，因为您同时拥有事件和状态。

然后，如果找到了正确的功能，则只调度ActivateFeatureAction。（我们也正在收听商店，所以如果稍后添加某个功能，我们会抓住它。）

ngrx副作用：等待商店数据或取消

1 个答案: