angular-cli hmr和ngrx

我目前正在使用angular-cli项目(1.0.0-beta.25.5)与ngrx来管理状态.我已经跟随 this article并设法让热模块更换工作,但是当发生这种情况时我还没有找到维持状态的方法.

我见过以下但是无法获得任何工作或获取灵感：

> https://github.com/CodeSequence/ngrx-store-hmr(旧方法)
> https://github.com/AngularClass/angular2-hmr(认为您需要访问webpack config才能添加加载程序)
> Angular 2 : Thoughs about HMR and @ngrx/store(尝试了get__HMR__state,但没有为我工作)

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

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

解决方法

我知道这是坏死的; P但是对于一些人来说这仍然有用.

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

解决方法

相关推荐