freezer-redux-devtools
v1.2.0
Published
A bind to use redux-devtools in freezer-js apps.
Downloads
8
Maintainers
Readme
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 byDevTools
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?