redux-devtools/extension/docs/Integrations.md

Integrations for js and non-js frameworks

Mostly functional:

• React
• Angular
• Cycle
• Ember
• Fable
• Freezer
• Mobx
• PureScript
• Reductive
• Aurelia

In progress:

• ClojureScript
• Horizon
• Python
• Swift

React

Inspect React props

react-inspect-props

import { compose, withState } from 'recompose';
import { inspectProps } from 'react-inspect-props';

compose(
  withState('count', 'setCount', 0),
  inspectProps('Counter inspector')
)(Counter);

Inspect React states

remotedev-react-state

import connectToDevTools from 'remotedev-react-state'

componentWillMount() {
    // Connect to devtools after setup initial state
    connectToDevTools(this/*, options */)
  }

Inspect React hooks (useState and useReducer)

reinspect

import { useState } from 'reinspect';

export function CounterWithUseState({ id }) {
  const [count, setCount] = useState(0, id);
  // ...
}

Mobx

mobx-remotedev

import remotedev from 'mobx-remotedev';
// or import remotedev from 'mobx-remotedev/lib/dev'
// in case you want to use it in production or don't have process.env.NODE_ENV === 'development'

const appStore = observable({
  // ...
});

// Or
class appStore {
  // ...
}

export default remotedev(appStore);

Angular

ng2-redux

import { NgReduxModule, NgRedux, DevToolsExtension } from 'ng2-redux';

@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);
  }
}

For Angular 1 see ng-redux.

Angular @ngrx/store + @ngrx/store-devtools

import { StoreDevtoolsModule } from '@ngrx/store-devtools';

@NgModule({
  imports: [
    StoreModule.forRoot(rootReducer),
    // Instrumentation must be imported after importing StoreModule (config is optional)
    StoreDevtoolsModule.instrument({
      maxAge: 5,
    }),
  ],
})
export class AppModule {}

Example of integration (live demo).

Ember

ember-redux

//app/enhancers/index.js
import { compose } from 'redux';
var devtools = window.__REDUX_DEVTOOLS_EXTENSION__
  ? window.__REDUX_DEVTOOLS_EXTENSION__()
  : (f) => f;
export default compose(devtools);

Cycle

@culli/store

import { run } from '@cycle/most-run';
import { makeDOMDriver as DOM } from '@cycle/dom';
import Store, { ReduxDevtools } from '@culli/store';
import App, { newId } from './App';

run(App, {
  DOM: DOM('#app'),
  Store: Store(
    ReduxDevtools({
      items: [
        { id: newId(), num: 0 },
        { id: newId(), num: 0 },
      ],
    })
  ),
});

Freezer

freezer-redux-devtools

import React, { Component } from 'react';
import { supportChromeExtension } from 'freezer-redux-devtools/freezer-redux-middleware';
import Freezer from 'freezer-js';

// Our state is a freezer object
var State = new Freezer({ hello: 'world' });

// Enable the extension
supportChromeExtension(State);

Horizon

horizon-remotedev

// import hzRemotedev from 'horizon-remotedev';
// or import hzRemotedev from 'horizon-remotedev/lib/dev'
// in case you want to use it in production or don't have process.env.NODE_ENV === 'development'

//Setup Horizon connection
const horizon = Horizon();

// ...
// Specify the horizon instance to monitor
hzRemotedev(horizon('react_messages'));

Fable

fable-elmish/debugger

open Elmish.Debug

Program.mkProgram init update view
|> Program.withDebugger // connect to a devtools monitor via Chrome extension if available
|> Program.run

or

open Elmish.Debug

Program.mkProgram init update view
|> Program.withDebuggerAt (Remote("localhost",8000)) // connect to a server running on localhost:8000
|> Program.run

PureScript

purescript-react-redux

Example of integration.

ClojureScript

Example of integration

Python

pyredux

WIP

Swift

katanaMonitor for katana-swift

import KatanaMonitor

var middleware: [StoreMiddleware] = [
// other middleware
]

#if DEBUG
middleware.append(MonitorMiddleware.create(using: .defaultConfiguration))
#endif

Reductive

reductive-dev-tools

let storeEnhancer =
  ReductiveDevTools.(
    Connectors.reductiveEnhancer(
      Extension.enhancerOptions(~name="MyApp", ()),
    )
  );

let storeCreator = storeEnhancer @@ Reductive.Store.create;

Aurelia

aurelia-store

import {Aurelia} from 'aurelia-framework';
import {initialState} from './state';

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature('resources');

    ...

  aurelia.use.plugin('aurelia-store', {
    initialState,
    devToolsOptions: { // optional
      ... // see https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md
    },
  });

  aurelia.start().then(() => aurelia.setRoot());
}