colinskow / angular-electron-dream-starter

:tada: An Angular Electron Starter kit featuring Webpack, Angular 4 (Router, Http, Forms, Services, ngrx, Tests, E2E, Coverage), Karma, Spectron, Jasmine, Istanbul, and TypeScript
MIT License
162 stars 54 forks source link

Redux Devtools not detecting state #25

Closed Kaffiend closed 6 years ago

Kaffiend commented 6 years ago

Note: for support questions, please use one of these channels: Chat: AngularClass.slack or Twitter: @AngularClass

Kaffiend commented 6 years ago

issue resolves when you do not override the store with the meta reducers here, and just declare them, which is of course not AoT friendly.

Edit: Didnt dawn on me till a second look, its just the order of which its declared in the override, simple add devtool instrumentation after store and its fine.

colinskow commented 6 years ago

@Kaffiend PR welcome to correct the order of meta reducers.

debuggerpk commented 6 years ago

as sugested by @Kaffiend, i have done the above.

let NGRX_IMPORTS = [];

if (ENV === 'development') {
  console.log('Loading @ngrx dev tools');
  /**
   * StoreModule.forRoot is imported once in the root module, accepting a reducer
   * function or object map of reducer functions. If passed an object of
   * reducers, combineReducers will be run creating your application
   * meta-reducer. This returns all providers for an @ngrx/store
   * based application.
   */
  NGRX_IMPORTS.push(StoreModule.forRoot(ApplicationState, { metaReducers }));
    /**
     * Store devtools instrument the store retaining past versions of state
     * and recalculating new states. This enables powerful time-travel
     * debugging.
     *
     * To use the debugger, install the Redux Devtools extension for either
     * Chrome or Firefox
     *
     * See: https://github.com/zalmoxisus/redux-devtools-extension
     */
  NGRX_IMPORTS.push(StoreDevtoolsModule.instrument({ maxAge: 25 }));
} else {
  /**
   * StoreModule.forRoot have a problem while working with AngularHMR, therefore
   * we do not import it here.
   */
  NGRX_IMPORTS.push(StoreModule.forRoot(ApplicationState));
}

no ❤️

Kaffiend commented 6 years ago

@ysfjwd make sure your imports are spread after the reducers and router connecting module as well.

if (ENV === 'development') {
  console.log('loading react devtools');
  // AoT won't allow metaReducers, so we need to add them conditionally
  // this should override the previous StoreModule declaration
  CONDITIONAL_IMPORTS.push(StoreModule.forRoot(reducers, { metaReducers }));
  CONDITIONAL_IMPORTS.push(StoreDevtoolsModule.instrument());
}

/**
 * `AppModule` is the main entry point into Angular2's bootstraping process
 */
@NgModule({
  bootstrap: [AppComponent],
  imports: [ // import Angular's modules
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    MaterialModule,
    CoreModule.forRoot(),
    StoreModule.forRoot(reducers),
    StoreRouterConnectingModule,
    EffectsModule.forRoot([SettingsEffects]),
    RouterModule.forRoot(ROUTES, { useHash: true , preloadingStrategy: PreloadAllModules}),
    ...CONDITIONAL_IMPORTS
  ],
debuggerpk commented 6 years ago

yep, found the fix.

Also, It does require a refresh on my end.

Kaffiend commented 6 years ago

Yes state dependency chain changes are not injectable and require a restart.

On Oct 19, 2017 2:26 PM, "Yousuf Jawwad" notifications@github.com wrote:

yep, found the fix.

Also, It does require a refresh on my end.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/colinskow/angular-electron-dream-starter/issues/25#issuecomment-337995824, or mute the thread https://github.com/notifications/unsubscribe-auth/AHdrNaky0RmAyH0uKQfBtHUzwPwCcYEuks5st5RegaJpZM4PzSMM .

debuggerpk commented 6 years ago

just issued a pull request #28