redux-dev-tools.md

Using DevTools

@angular-redux/store is fully compatible with the Chrome extension version of the Redux dev tools:

https://github.com/zalmoxisus/redux-devtools-extension

However, due to peculiarities of Angular's change detection logic, events that come from external tools don't trigger a refresh in Angular's zone.

We've taken the liberty of providing a wrapper around the extension tools that handles this for you.

Here's how to hook the extension up to your app:

import { NgReduxModule, NgRedux, DevToolsExtension } from '@angular-redux/store';

// Add the dev tools enhancer your ngRedux.configureStore called
// when you initialize your root component:
@NgModule({
  /* ... */
  imports: [ /* ... */, NgReduxModule ]
})export class AppModule {
  constructor(
    private ngRedux: NgRedux,
    private devTools: DevToolsExtension) {

    let enhancers = [];
    // ... add whatever other enhancers you want.

    // You probably only want to expose this tool in devMode.
    if (__DEVMODE__ && devTools.isEnabled()) {
      enhancers = [ ...enhancers, devTools.enhancer() ];
    }

    this.ngRedux.configureStore(
      rootReducer,
      initialState,
      [],
      enhancers);
  }
}

ReduxDevTools.enhancer() takes the same options parameter as documented here: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#windowdevtoolsextensionconfig