angular - Angular 2:关于HMR和@ ngrx/store的想法

在开始之前，此链接可能很有用：what is the purpose of HMR ?。
我没有在大型项目管理/构思方面的深厚经验。我还很年轻，还留着漂亮的胡子。所以我在这里，寻求建议。
种子
我正在研究和思考this seed of angular 2并且我想知道使用hmr是否是开发大型应用程序的一个可行的选择，以及如何做到这一点。
这些都是我的想法，我只是想和你讨论下我的决定。我们都需要通过我们的经验：
数据结构
基于此示例：

@Component({
  selector: 'home',
  templateUrl: `
    <form (ngSubmit)="submitState(localState.value)" autocomplete="off">

      <input
        [value]="localState.value"
        (input)="localState.value = $event.target.value"
        placeholder="Submit Local State to App State">

      <button>Submit Value</button>
    </form>
  `
})
export class HomeComponent {
  localState = { value: '' };

  constructor(public appState: AppState, public title: Title) {}

  onSubmit(value: string) {
    this.appState.set('value', value);
    this.localState.value = '';
  }
}

通过使用appstate，可以动态地重新加载组件并注入数据。听起来很酷。但这里是我的第一个问题：要启用此功能，组件必须在appstate树中有一个位置，因此在示例中使用类似于localState的值是一个好主意。这迫使我们在组件中使用一个对象，这个对象可能很大。可能很烦人。你同意吗？在大型应用程序上会不会有问题？（我要开发一个大型应用程序）。
它可能什么都不是，因为我只需要将要由hmr跟踪的数据存储在localStorage中。为什么不呢？
数据存储
说到存储，我也使用@ NGRX/Stury作为ReDux的实现。这似乎是一个非常好的主意，因为状态可以是mylocalStorage。当应用程序更新时，我只需要重新水化我的状态，它就会工作。HMR不会跟踪组件中的数据，只会跟踪状态。
听起来很棒。但这是个好主意吗？我试图找到一个连接器来处理@ngrx/store和hmr之间的通信。Victory !但这个包裹似乎过时了。
我可以自己做，但这是个好主意吗？Angular的服务将使用减速机，我可以找到钩子来更新HMR的状态。
我认为@ngrx/store和hmr是角度显影剂的最佳选择。这两种技术似乎很合适，但我在这里找不到很多资源。所以我想一定有个问题我现在没看到。
我写这些都是为了征求你对这些技术/问题的看法。
你看到那些技术结合起来的缺点了吗？我在试验，但我不能考虑所有的情况。所以我需要你的帮助。
总结
HMR准备好“生产”了吗？
是否可以在@ngrx/store中移动大量信息（如“选中此复选框”、“此输入的当前值为foobar”…）
最重要的是：这些技术适合吗？
这些问题提醒我。

最佳答案

在大多数情况下，dr-hmr是您在开发中使用的工具。像没有它一样开发你的应用程序，不要太在意它是如何工作的。如果出现问题，请重新加载页面。从长远来看，这仍然会节省你很多时间…
角度应用程序很大（几兆字节），编译它们需要时间。hmr在开发中用于加快速度，因此每次更改代码时，您不必等待几秒钟就可以看到结果。hmr的工作原理是利用您已经使用的加载程序（最常见的是webpack和/或systemjs）。好吧，你可能知道这一切（；
我最近实现了一个基于systemjs的自定义hmr（使用systemjs-hmr）。基本原则是：更改代码时，通知加载程序并重新加载更改。剩下的只是清理以确保你的应用程序仍在工作…
我的HMR很基本：
重新加载更改的应用程序代码（组件、服务、管道…），
重新创建<app-root>，like this，
使用NgModuleRef.destory()销毁旧应用程序，
启动新应用程序：platformBrowserDynamic().bootstrapModule(AppModule).then(module => window['__HMR__'] = module)
获取初始值
这是我使用的代码：

import { Store } from '@ngrx/store';
export function get__HMR__state() {
  let state = {};
  if (window['__HMR__']) {
    const module = window['__HMR__'];
    const store = module.injector.get(Store);
    store.take(1).subscribe(s => state = s);
  }
  return state;
}

@NgModule({
  imports: [
    StoreModule.provideStore(AppReducer, get__HMR__state())
  ]
})

我不在@ngrx/store（ngrx/store）的应用程序中存储任何不需要的东西。输入值和属性可以更好地处理like this。
它工作得很好，我通常启动dev进程（使用自定义的gulp构建工作流），然后在一天的剩余时间里忘记它（；事情确实会中断，特别是当我处理项目结构和依赖关系时，但是quick f5和所有东西都在重新工作。当我使用模板和样式时（这是最痛苦的部分，如果您不得不等待很长时间的更改），重新加载可以很好地工作。
我使用AppState进行“项目管理”，当我使用angular-cli进行开发时（使用webpack），我得到3-8秒+2-4秒的重建时间来重新加载页面。这是我在代码上做的任何更改。使用gulp+hmr（在同一个cli项目上），我得到了50-400ms+200-500ms重新加载的重建时间。这是很重要的，也是我做自定义构建的原因（；如果出现问题，请点击f5，2-4秒后应用程序将再次工作。
最后，我强烈推荐给那些每天花几个小时编写代码的人使用hmr（；它并不完美，但是没有工具，而且从长远来看，这个工具节省了很多时间。但是，不要更改你的应用程序以适应该工具。编写代码，就像没有hmr一样。如果你需要一些额外的东西而工具不能做到这一点，你可以一直扩展它-它只是一个javascript（；