A bind to use redux-devtools in freezer-js apps.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
LICENSE
README.md
freezer-redux-devtools.js
freezer-redux-middleware.js
package.json

README.md

freezer-redux-devtools

A bind to use redux-devtools in freezer-js apps.

Dan Abramov's redux is a really clever piece of software, but I love the simplicity of freezer-js to create flux apps. Redux has the best tools for developers and freezer-js has nothing similar. Fortunatelly both solutions relies in having all the app state in a single object, so make redux-devtools working with freezer instead of redux is not difficult.

This package creates a redux store that communicates redux-devtools and freezer-js.

Installation

Go to your project root and...

npm install --save freezer-redux-devtools

Usage

See the freezer-redux-devtools example to see this module working.

There are two ways of using this package:

Adding the devtools to your application

This method needs your project to have redux, freezer-js and redux-devtools installed in order to work. freezer-redux-devtools won't install them for you.

import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
import React, { Component } from 'react';
import { getStore } from 'freezer-redux-devtools';
import Freezer from 'freezer-js';

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

// Create a redux store that talks to freezer state
const store = getStore( State );

// Root component including devtools and refreshing on state change
export default class App extends Component {
  render() {
    return (
      <div>
        <MyApp state={ State.get() } />
        <DebugPanel top right bottom>
            <DevTools store={store} monitor={LogMonitor} />
        </DebugPanel>
      </div>
    );
  }
  componentDidMount() {
    State.on('update', () => this.forceUpdate());
  }
}

Using redux-devtools chrome extension

This way you don't need to install redux, or redux-devtools in your project. You need to have redux-devtools chrome extension instead.

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

// You don't need anything special in your root component.
export default class App extends Component {
  render() {
    return <MyApp state={ State.get() } />;
    );
  }
  componentDidMount() {
    State.on('update', () => this.forceUpdate());
  }
}

How it works

Every event triggered in State object will be shown in the DevTools sidebar. And all the actions dispatched by the DevTools will be reflected in State-

freezer-redux-devtools module exports:

  • getStore( Freezer:State, boolean:persist=/[?&]debug_session=([^&]+)\b/) creates a store to be used directly by DevTools component.

freezer-redux-devtools/freezer-redux-middleware module exports:

  • FreezerMiddleware( Freezer:State ) creates a redux store enhancer to let you create your own redux store.
  • supportChromeExtension( Freezer:State ) turns on the redux-devtools chrome extension.

Collaborate

This project is in some way a fully functional proof of concept, but there is room for improvement:

  • Extract the names of reaction arguments and show them in the sidebar.
  • How to display asynchronous reactions?

License MIT