Question

据我了解，如果要使用功能模块，则会为每个功能创建一个状态切片：

StoreModule.forFeature('user', userReducer.reducer)

然后在根模块中执行

StoreModule.forRoot({})

现在，当我想在组件中使用商店时，我将注入商店：

constructor( private store: Store<any>)

和

this.store.select(state => state.user.saveError) .subscribe((error) => { this.toastOptions.msg = error; this.toastyService.error(this.toastOptions); });

如果一切正确，那么这里存储变量的正确类型是什么？

Answer 1

由于商店没有类型，所以没有特定类型，但是您可以定义接口以使其成为开发类型。 StoreModule.forFeature('user', userReducer.reducer)的作用是在根状态下添加了一个user属性，该属性将保持要素状态。您注入的商店始终包含整个应用程序的所有状态，这就是为什么您必须使用选择器的原因。您有两种可能的方式来键入商店。

第一个是只关注功能模块内部看到的内容，而忽略其余内容。然后，它类似于注释中建议的内容。例如，如果您定义了由userReducer创建的功能状态：

export interface UserState {
  saveError: string;
}

然后，因为您将特征命名为user，所以商店的类型可以定义为：

export interface ApplicationState {
  user: UserState;
}

第二种选择是，如果您事先了解所有功能，则可以为商店的所有结构定义一个接口。

例如，您具有另一种状态不同的功能：

export interface AnotherFeatureState {
  stateProperty: string;
}

然后应用程序状态将为：

export interface ApplicationState {
  user?: UserState;
  anotherFature?: AnotherFeatureState;
}

我将状态属性设置为可选，因为可以延迟加载模块，在这种情况下，直到加载模块后属性才不存在。如果您不进行延迟加载，则可以假定它们始终在其中。

在两种情况下，您输入构造函数的方式都是：

constructor(private store: Store<ApplicationState>)

使用功能模块时的ngrx商店类型

1 个答案: