仅在组件中注入 ngrx 功能状态答案

【问题标题】：Inject just ngrx feature state in a component仅在组件中注入 ngrx 功能状态
【发布时间】：2019-11-20 11:16:13
【问题描述】：

我有一个功能状态，我想将它注入到一个组件中。从我看到的所有示例中，只有一个选项可以让包含所有功能状态的全局状态注入。是否可以仅将功能状态注入组件，而不是整个 ngrx 存储？

【问题讨论】：

【解决方案1】：

当您注入Store 时，您将始终拥有其完整状态。商店中的通用名称，例如FeatureState on Store<FeatureState>，只是为了在编译时在该组件中具有类型安全性。这是为字符串选择器或函数选择器完成的，例如store.select(s => s.customers)。如果您将选择器与 createSelector 一起使用，则不再需要泛型类型，因为选择器本身是类型安全的。

在运行时，您将始终获得完整状态。

【讨论】：

【解决方案2】：

您可以使用 createSelector 创建一个选择器，它只返回您的功能状态，请参阅此链接了解更多详细信息： https://ngrx.io/guide/store/selectors#using-a-selector-for-one-piece-of-state

【讨论】：

【解决方案3】：

当您使用 NgRx 的外观模式时，您可以将状态切片注入智能组件。

外观为子系统中的一组接口提供接口。在我们的示例中，我们希望为商店的选定部分提供一个界面。以本文中的图表为例：https://medium.com/@thomasburlesonIA/ngrx-facades-better-state-management-82a04b9a1e39

将系统构建为子系统可降低复杂性。外观最小化了组件中 ngrx 依赖项的通信。我们不是像疯子一样导入ngrx，而是导入一个代表我们商店的一个功能切片的服务。


@Injectable({
  providedIn: 'root'
})
export class UserFacade {
  constructor(
    private store: Store<AppState>
  ) {}

  public loadUser(): void {
    this.store.dispatch(new fromUserActions.LoadUser());
  }

  public optimisticLoadUser(): void {
    this.user.pipe(
      take(1),
      filter(this.isUserInStoreAlready())
    ).subscribe(() => this.loadUser());
  }

  public get user(): Observable<User> {
    return this.store.pipe(select(fromUserQuey.getUser));
  }
}

然后，您将为该状态创建一个模块并将该功能注入您的商店

@NgModule({
  declarations: [],
  imports: [
    StoreModule.forFeature(USER_KEY, userReducer),
    EffectsModule.forFeature([UserEffects]),
  ]
})
export class UserStoreModule { }

现在，当任何组件需要有关用户的信息时，他们可以简单地注入 UserFacde 并使用它与您的商店进行通信。

...
export class SomeSmartComponent {

  constructor(
    private userFacade: UserFacade
  ) { }

...
}

要将来自多个外观的状态切片组合在一起，您可以使用应用级外观，它将多个外观消耗到一个外观中。我希望这可以帮助您将您的 ngrx 存储分解为可消化的块。

【讨论】：