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.
;;;; // Our state is a freezer objectvar State = hello: 'world'; // Create a redux store that talks to freezer stateconst store = ; // Root component including devtools and refreshing on state change { return <div> <MyApp state= State /> <DebugPanel top right bottom> <DevTools store=store monitor=LogMonitor /> </DebugPanel> </div> ; } { State; }
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.
;;; // Our state is a freezer objectvar State = hello: 'world'; // Enable the extension; // You don't need anything special in your root component. { return <MyApp state= State />; ); } { State; }
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?