【问题标题】: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,所以就我所见,没有打字好处?

【问题讨论】:

    标签: angular store strong-typing


    【解决方案1】:

    具体点

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

    不过,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 =&gt; ....),它不是按照商店的通用类型键入的吗? (在编码时帮助您,自动完成和编译错误?)
    • 谢谢你,这正是我正在寻找的信息。我只是将选择器传递给 select 函数。当你这样做时,你如何键入商店并不重要。但是当你传入一个 mapFn 时,该类型确实提供了代码补全。
    猜你喜欢
    • 1970-01-01
    • 2019-07-20
    • 2017-04-23
    • 1970-01-01
    • 2017-08-19
    • 1970-01-01
    • 2015-08-15
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多