在 NgRx 中强类型化存储的目的是啥？

Posted 2023-03-16

【中文标题】在 NgRx 中强类型化存储的目的是啥？

【英文标题】：What is the purpose of strongly typing the store in NgRx?在 NgRx 中强类型化存储的目的是什么？

【发布时间】：2020-06-19 21:06:14

【问题描述】：

CoreModule 是一个预先加载的模块，包含应用程序启动时所需的状态。

import * as fromCore from './state/core.reducer';

@NgModule(
  ...
  imports: [
    StoreModule.forRoot( core: fromCore.reducer ),

DocumentModule 是一个延迟加载的模块。

import * as fromDocument from './state/document.reducer';

@NgModule(
  ...
  imports: [
    StoreModule.forFeature('document', fromDocument.reducer),

DocumentComponent 注入存储。

import * as fromDocument from './state/document.reducer';

constructor(private store: Store<fromDocument.State>)  

fromDocument.State 扩展了“核心”状态。

import * as fromCore from '../../core/state/core.reducer';

export interface State extends fromCore.State 
    document: DocumentState;

这是一种我看到到处都在使用的方法，但我认为它没有任何好处。当我将它设置为 fromDocument.State 不扩展 fromCore.State 时，我仍然可以访问 DocumentComponent 中状态树的“核心”部分。

this.user$ = this.store.select(fromCore.getUser);

通过将存储注入组件中，我始终可以访问完整的状态树，无论我如何键入存储。那么强类型存储的目的究竟是什么？为什么不到处使用 Store 呢？我与 store 对象交互的唯一方法是 store.select 和 store.dispatch，所以就我所见，没有打字好处？

【参考方案1】：

具体点

在您提到的特定情况下，键入将有助于 select 的重载，该重载将映射函数作为参数，例如this.store.select(s => ....).

不过，NgRx 仍然允许您进行无类型选择。 GitHub上的相关讨论：https://github.com/ngrx/store/issues/60

一般

TypeScript 和其他花哨的东西（以及，公平地说，所有编程语言的大多数功能）的强类型并不意味着

为您的程序自动验证 充当某种安全功能（防止数据泄露）

它们只是我们可怜的人类开发人员的拐杖，以避免犯我们通常在自己的代码中编写的愚蠢错误。

示例：例如尝试在代码的晦涩、被遗忘的部分调用user.namme 而不是user.name，这将导致一连串的错误。想象一下，它在一个陌生的地方只向用户显示了一些“未定义”和“登录错误”，并且只有当他以特定顺序执行 5 个非常具体的操作时，这有点难以追溯和重现。

如果您使用强类型，编译器会在投入生产之前快速检测到这一点。

【讨论】：

这不是一般强类型的问题。这是一个关于 NgRx 存储对象需要类型参数的非常具体的问题。

@pcmcoomans 如果我错过了你的观点，那我很糟糕。这里有关于 store github 的打字的相关讨论：github.com/ngrx/store/issues/60。 （另外，作为旁注，我通常看到的模式是将商店注入服务中，而不是直接注入组件）。如果您这样做this.store.select(s => ....)，它不是按照商店的通用类型键入的吗？ （在编码时帮助您，自动完成和编译错误？）

谢谢你，这正是我正在寻找的信息。我只是将选择器传递给 select 函数。当你这样做时，你如何键入商店并不重要。但是当你传入一个 mapFn 时，该类型确实提供了代码补全。