angular-cli hmr 和 ngrx

Question

我目前正在使用带有 ngrx 的 angular-cli 项目 (1.0.0-beta.25.5) 来管理状态。我关注了this article并设法让热模块更换正常工作，但是我还没有找到一种方法来在发生这种情况时保持状态。

我已经看到以下内容，但无法使任何工作正常进行或获得灵感:

• https://github.com/CodeSequence/ngrx-store-hmr (旧方法)

• https://github.com/AngularClass/angular2-hmr (认为​​您需要访问 webpack 配置以添加加载器)

• Angular 2 : Thoughs about HMR and @ngrx/store (尝试了 get__HMR__state 但对我不起作用)

有没有人对如何处理这个问题有任何想法或建议？我希望继续使用 cli，因此需要找到一种与之集成的方法。

编辑:在这里也找到了同样问题的人https://github.com/ngrx/store/issues/311

Answer 1

我知道这是死灵法术；P 但对于某些人来说这仍然可能有用。

长话短说

您从 Angular 类 HMR 中错过的很可能是用于设置完整状态的元缩减器。

下面是我如何通过示例链接实现 HMR，我从中得出了这个 https://github.com/gdi2290/angular-hmr

元 reducer

首先，您需要一个元 reducer 来处理整个状态的设置。

// make sure you export for AoT
export function stateSetter(reducer: ActionReducer<any>): ActionReducer<any> {
  return function(state: any, action: any) {
    if (action.type === 'SET_ROOT_STATE') {
      return action.payload;
    }
    return reducer(state, action);
  };
}

let _metaReducers: MetaReducer<fromRoot.State, any>[] = [];
if (environment.hmr) {
  _metaReducers = [stateSetter];
}

export const metaReducers = _metaReducers;

当为 NgModule 注册 StoreModule.forRoot 时，记得注册那个 metareducer 数组。

StoreModule.forRoot(reducers, { metaReducers })

应用模块

对于 AppModule，您需要定义 hmrOnInit 、 hmrOnDestroy 和 hmrAfterDestroy 方法。

• hmrOnInit 加载状态
• hmrOnDestroy 写入状态(注意 ngrx store.take(1) 实际上是同步它列在 ngrx github 问题的某处，似乎找不到 atm 的位置)。
• hmrAfterDestroy 清理已有的组件元素

export class AppModule {
  constructor(
    private appRef: ApplicationRef,
    private store: Store<fromRoot.State>
  ) { }

  public hmrOnInit(store) {
    if (!store || !store.state) {
      return;
    }
    // restore state
    this.store.dispatch({ type: 'SET_ROOT_STATE', payload: store.state });
    // restore input values
    if ('restoreInputValues' in store) {
      const restoreInputValues = store.restoreInputValues;
      // this isn't clean but gets the job done in development
      setTimeout(restoreInputValues);
    }
    this.appRef.tick();
    Object.keys(store).forEach(prop => delete store[prop]);
  }

  public hmrOnDestroy(store) {
    const cmpLocation = this.appRef.components.map(
      cmp => cmp.location.nativeElement
    );
    let currentState: fromRoot.State;
    this.store.take(1).subscribe(state => (currentState = state));
    store.state = currentState;
    // recreate elements
    store.disposeOldHosts = createNewHosts(cmpLocation);
    // save input values
    store.restoreInputValues = createInputTransfer();
    // remove styles
    removeNgStyles();
  }

  public hmrAfterDestroy(store) {
    // display new elements
    store.disposeOldHosts();
    delete store.disposeOldHosts;
  }
}

有关更多具体信息，请参阅 https://github.com/gdi2290/angular-hmr