Skip to content
React Actions Recorder
CoffeeScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images
src
style
.gitignore
.npmignore
README.md
gulpfile.coffee
package.json
template.coffee
webpack.config.coffee
webpack.min.coffee

README.md

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
# initial structure of store
initialStore = Immutable.fromJS []

# update a tree of store with Immutable APIs with pure function
updater = (store, actionType, actionData) ->
  store
recorder = require 'actions-recorder'

recorder.setup
  initial: initialStore
  updater: updater
  inProduction: false

render = (core) ->
  App = Page store: core.get('store')
  ReactDOM.render App, document.querySelector('.app')

recorder.request render
recorder.subscribe render
# if you have several args, use an Array or an Object
# argument will be turned into Immutable data
recorder.dispatch '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-recorder/lib/devtools'

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

You can’t perform that action at this time.