NGXS @Select 与状态模型一起使用答案

【问题标题】：NGXS @Select usage with state modelNGXS @Select 与状态模型一起使用
【发布时间】：2018-10-11 02:54:29
【问题描述】：

当使用 NGXS @Select 装饰器时，访问状态模型上定义的属性的正确方法是什么。

例如，定义了以下状态：

export interface UserStateModel {
 firstname: string;
 lastname: string;
}

@State<UserStateModel>({
  name: 'user',
  defaults: {}
})
export class UserState {..}

如果我想像这样在组件中选择用户状态：

..export class MyComponent {

  @Select(UserState) user$: Observable<UserState>;

   ngOnInit(){
     this.user$.subscribe(u => {
         //do something with user state
         console.log(u.firstname);
     });
   }   
}

我收到打字稿错误，因为UserState 上不存在firstname 属性（因为它是在相关模型类型上定义的）。如果我在组件 html 模板中引用该属性，那么我没有任何问题。

关于选择器的使用有一个related discussion，但我只是想确认一下我对当前版本的期望（以及我是否正确地执行此操作！）。

我正在使用"@ngxs/store": "^3.0.0-rc.2",

【问题讨论】：

我现在想知道是否正确的方法是将我的选择器声明为@Select(UserState) user$: Observable<UserStateModel>。

标签： angular typescript ngxs

【解决方案1】：

由 @Select 装饰器装饰的 observable 将是模型的数据类型，而不是状态类。即：

export class MyComponent {

  @Select(UserState) user$: Observable<UserStateModel>;

   ngOnInit(){
     this.user$.subscribe(u => {
         //do something with user state
         console.log(u.firstname);
     });
   }   
}

另一个注意事项是，我建议在您的模板中使用异步管道，以便 Angular 为您管理订阅和取消订阅。

【讨论】：

感谢@Mark 从我之前的评论中确认。回复：异步管道，是的，一直在尽可能地使用它。我正在现有的 Angular 应用程序上尝试 NGXS，因此在组件模板中使用管道，但我有一些服务是订阅者，所以我认为我需要在那里手动订阅（没有模板）。

【解决方案2】：

看看我刚刚创建的这个runnable demo project。

它提供了一个演示，可以从包含books: Book[] 的BookStateModel 中选择allBooks$ 和thickBooks$。

注意事项：

@Selector() 在 BookState.ts 中声明 (memoized)，以便可以在其他地方使用。
这些记忆选择器可以通过@Select(Xxx)使用。

希望这会有所帮助。

【讨论】：

感谢您的演示链接！
无价之宝。谢谢。

【解决方案3】：

您对问题的评论是选择整个状态容器的正确方法。

另一种选择（我认为更好的解决方案）是使用a root-state model to infer types in Selectors. 有了这些，您可以只选择必要的状态属性，并且仍然具有类型安全性。

我对当前发布的解决方案的看法：

Memoized Selectors：为您想要选择的每个未修改状态属性编写一个 memoized 选择器的开销很大。我还希望记忆选择器有一个小的性能缺陷，这可能也是它不是types issue. 的官方解决方案的原因
选择整个状态：超级不方便，因为您很少需要整个状态（例如，在您的示例中，只选择您的 UserState 的名字）。大多数时候，您希望选择一个特定的状态属性并将其绑定到您的视图或订阅它。您将获得更少的开销和更清晰/更清洁的代码。

【讨论】：