node package manager

actions-recorder

React Actions Recorder, inspired by Redux

Demo http://ui.talk.ai/actions-recorder/

Tricks:

  • Click with "Shift" key pressing to step backward.
  • set inProduction true if you want to limit size of records to 400

Chinese Guide

Usage

npm i --save actions-recorder

Get recorder:

recorder = require 'actions-recorder'

Get Devtools:

# for component 
Devtools = require 'actions-recorder/lib/devtools'

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.getState() or core.get('store') to find store.

Devtools is a component to show actions:

React.createElement Devtools,
  core: core # internal data from recorder 
  width: window.innerWidth
  height: window.innerHeight # flexbox not powerful enough, use JavaScript 
  path: @state.path # path of JSON tree reader, use `Immutable.List()` as default 
  onPathChange: (newPath) -> @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 module.hot
  module.hot.accept ['./updater''./schema']->
    schema = require './schema'
    updater = require './updater'
    recorder.hotSetup
      initial: schema.store
      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