title: Angular 2 : Thoughs about HMR and @ngrx/store
body: <p><em>Before starting, this link can be useful : <a href="https://stackoverflow.com/questions/38078353/ng2-angular2-webpack-starter-what-is-the-purpose-of-hmr">what is the purpose of HMR ?</a>.</em></p>
  
  <p><em>I do not have a deep experience in huge projects management / conception. I'm still to young to have a beautiful beard. So I am here, looking for advices.</em></p>
  
  <h2>the seed</h2>
  
  <p>I am looking and thinking at <a href="https://github.com/AngularClass/angular2-webpack-starter" rel="nofollow noreferrer">this seed of angular 2</a> and I am wondering if using HMR is a viable option to develop a large application and how to do that.</p>
  
  <p><em>Those are just thoughs, I just want to discuss with you to make my decision. We all need to cross our experiences :-)</em></p>
  
  <h2>data structure</h2>
  
  <p>Based on this example :</p>
  
  <pre><code>@Component({
    selector: 'home',
    templateUrl: `
      &lt;form (ngSubmit)="submitState(localState.value)" autocomplete="off"&gt;
  
        &lt;input
          [value]="localState.value"
          (input)="localState.value = $event.target.value"
          placeholder="Submit Local State to App State"&gt;
  
        &lt;button&gt;Submit Value&lt;/button&gt;
      &lt;/form&gt;
    `
  })
  export class HomeComponent {
    localState = { value: '' };
  
    constructor(public appState: AppState, public title: Title) {}
  
    onSubmit(value: string) {
      this.appState.set('value', value);
      this.localState.value = '';
    }
  }
  </code></pre>
  
  <p>By using the appState, components can be dynamically reloaded and data can be injected. That sounds cool. But here is my first question : to enable this feature, components have to have a place in the appstate tree, so it's a good idea to use a <code>localState</code> like in the example. <strong>This force us to play with an object inside our components, which can be huge. It can be annoying. Do you agree with that ?</strong> Can it be an issue on a large application ? (I'm going to work on a large app).</p>
  
  <p>It can be nothing because I only have to store in my <code>localStorage</code> data which I want to be tracked by HMR. So why not.</p>
  
  <h2>data storage</h2>
  
  <p>Speaking about storage, I am also using @ngrx/store as an implementation of Redux. It seems to be a really good idea because the state can be my <code>localStorage</code>. When the app is updated, I just need to rehydrate my state and it works. Data in component will not be tracked by hmr, only the state will be.</p>
  
  <p>Sounds great. But is it a good idea ? I've tried to find a connector to take care about communications between @ngrx/store and hmr.  <a href="https://github.com/CodeSequence/ngrx-store-hmr" rel="nofollow noreferrer">Victory !</a> but this package seems to be outdated.</p>
  
  <p>I can do this by myself but is it a good idea ? <strong>Angular's services will use reducers and I can find hooks to update hmr's state.</strong></p>
  
  <p>I think that @ngrx/store and hmr are well kwnon by angular developpers. Those 2 technologies seems to fit well but I don't find a lot of ressources over here. So I'm thinking there must be an issue I don't see right now. </p>
  
  <p>I wrote all of this to ask you advices about your experience with those technologies / problematics.</p>
  
  <p>Do you see cons to combine those technologies ? I'm experimenting but I can't think about all the cases. That is why I need your help.</p>
  
  <h2>summary</h2>
  
  <ul>
  <li>Is HMR ready for "production" ?</li>
  <li>Is it okay to move a lot of information inside @ngrx/store (things like 'this checkbox is checked', 'the current value of this input is <code>foobar</code>'...)</li>
  <li>Most important : Do these technologies fit well ?</li>
  </ul>
  
  <p>Those questions remind me <a href="https://github.com/CodeSequence/ngrx-store-hmr/issues/2" rel="nofollow noreferrer">https://github.com/CodeSequence/ngrx-store-hmr/issues/2</a>.</p>