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