React Actions Recorder, inspired by Redux
Demo http://repo.react-china.org/actions-in-recorder/
Tricks:
- Click with "Shift" key pressing to step backward.
- set
inProduction
true if you want to limit size ofrecords
to400
Chinese Guide
Usage
npm i --save actions-in-recorder
# initial structure of store initialStore = ImmutablefromJS # update a tree of store with Immutable APIs with pure function = store
recorder = require 'actions-in-recorder' recordersetup initial: initialStore updater: updater inProduction: false = App = Page store: coreget'store' ReactDOMrender AppdocumentquerySelector'.app' recorderrequest renderrecordersubscribe render
# if you have several args, use an Array or an Object # argument will be turned into Immutable data recorderdispatch 'category/name''some arguments'
API Docs
recorder
has methods:
recorder.setup(options)
recorder.hotSetup(options)
recorder.getStore()
recorder.getCore()
recorder.request (core) ->
recorder.subscribe (core) ->
recorder.unsubscribe(listener)
recorder.dispatch(actionType, actionData)
You will need recorder.getStore()
or core.get('store')
to find store.
display DevTools
Get Devtools:
# for component Devtools = require 'actions-in-recorder/lib/devtools'
Devtools
is a component to show actions:
ReactcreateElement Devtools core: core # internal data from recorder width: windowinnerWidth height: windowinnerHeight # flexbox not powerful enough, use JavaScript path: @statepath # path of JSON tree reader, use `Immutable.List()` as default : @setState path: newPath
Read code in src/
to get more details.
Basic Hot Module Replacement support
.hotSetup()
is used in hot replacing updater
and initial
:
if modulehot modulehotaccept './updater''./schema'-> schema = require './schema' updater = require './updater' recorderhotSetup initial: schemastore updater: updater
Also read src/
for details. By now there's only basic support for HMR.
Background Image
http://www.fabuloussavers.com/new_wallpaper/DJ_Vinyl_Disc_freecomputerdesktopwallpaper_1920.jpg
Development
gulp html # generates index.html webpack-dev-server --hot --host=0.0.0.0
License
MIT