验证现有功能状态已添加到 NGRX 商店中

Question

下面是我目前在应用程序中面临的示例：

app.module.ts

@NgModule({
  ...
  imports: [StoreModule.forRoot(reducers)],
  ...
})
export class AppModule {}

商店

 users: {...}

articles.module.ts

@NgModule({
  ...
  imports: [StoreModule.forFeature('articles', reducers)],
  ...
})
export class ArticlesModule {}

用户导航到 /articles，然后 articles 状态切片将添加到商店

商店

 users: {...},
 articles: {...}

现在，假设最初，商店只有 users，在一个组件（属于用户模块）中，我使用的是 selector，我遇到的问题是，我需要在选择器中知道 articles 切片是否已添加到商店中，但我无法使用任何 articles 选择器，因为我收到此错误

Cannot access 'selectArticles' before initialization....`

有没有办法询问商店是否包含加载的某个切片？

Answer 1

正如您所注意到的，只有在 .forFeature 模块加载后，您才能在存储数据上使用选择器。

要解决这个问题，您应该在使用选择器之前更早地加载商店。一个好的模式是为您的商店创建一个单独的模块并将其从 app.modules

我建议您也添加一个 app.store 模块。随着代码的增长，您将不得不添加更多的商店模块。

新 app.store.模块:

@NgModule({
    imports: [
        StoreModule.forRoot(reducers),
        ...
        ArticleStoreModule
    ],
})
export class AppStoreModule {}

新 article.store.module:

@NgModule({
    imports: [
        StoreModule.forFeature('articles', reducers)),
        ...
    ],
})
export class ArticleStoreModule {}

然后将新 AppStoreModule 导入 app.module

Verify existing feature state is added in NGRX Store