angular-cli hmr和ngrx

TL; DR

你从角度级HMR中错过的很可能是用于设置完整状态的metareducer.

下面是我如何使用链接到我从中导出这个https://github.com/gdi2290/angular-hmr的示例实现HMR

Metareducer

首先,你需要一个metareducer来处理整个状态.

// 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

对于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