ishiduca/flux-on-stream.js

## flux-on-stream.js
'use strict'
var es     = require('event-stream')
var assign = require('object-assign')

// dispatcher
var dispatcher = es.map(function (payload, cb) {
    cb(null, payload)
})
// actions
var act = assign(es.map(function (payload, cb) {
    cb(null, payload)
}), {
    add: function () { this.write({actionType: 'calc', value: 1}) }
  , take: function () { this.write({actionType: 'calc', value: -1}) }
})

var actErrorCenter = assign(es.map(function (payload, cb) {
    cb(null, payload)
}), {
    error: function (err, _actionType) {
        this.write({actionType: _actionType || err.name, value: err})
    }
})

// stores
var value = 0

var store = es.map(function (payload, cb) {
    if ('calc' !== payload.actionType) return cb()

    var _value = value + payload.value

    if (_value < 0) {
        var err = new Error('value must be over "0"')
        err.name = 'CalcError'
        actErrorCenter.error(err)
        return cb()
    }

    cb(null, (value = _value))
})

var storeErrorCenter = es.map(function (payload, cb) {
    if ('CalcError' !== payload.actionType) return cb()

    cb(null, payload.value)
})

// view(component)
var view = es.map(function (value, cb) {
    view.view.innerHTML = String(value)
    cb()
})

var viewErrorCenter = es.map(function (err, cb) {
    viewErrorCenter.view.innerHTML = String(err)

    setTimeout(function () {
        viewErrorCenter.view.innerHTML = ''
    }, 2000)

    cb()
})

window.onload = function () {
    var $add  = document.querySelector('#add')
    var $take = document.querySelector('#take')

    view.view            = document.querySelector('#view')
    viewErrorCenter.view = document.querySelector('#errors')

    $add.onclick  = act.add.bind(act)
    $take.onclick = act.take.bind(act)

    es.merge( act, actErrorCenter ).pipe(dispatcher)

    dispatcher.pipe(store).pipe(view)
    dispatcher.pipe(storeErrorCenter).pipe(viewErrorCenter)
}

## index.html
<body>
<button type="button" id="add" >+</button> ||
<button type="button" id="take">-</button>
<div id="view">--</div>
<div id="errors"></div>
<script src="./bundle.js"></script>
</body>

## package.json
{
  "name": "flux-on-stream",
  "dependencies": {
    "event-stream": "^3.3.0",
    "object-assign": "^2.0.0"
  },
  "scripts": {
    "build": "browserify ./flux-on-stream.js -o ./bundle.js"
  }
}
	'use strict'
	var es = require('event-stream')
	var assign = require('object-assign')

	// dispatcher
	var dispatcher = es.map(function (payload, cb) {
	cb(null, payload)
	})
	// actions
	var act = assign(es.map(function (payload, cb) {
	cb(null, payload)
	}), {
	add: function () { this.write({actionType: 'calc', value: 1}) }
	, take: function () { this.write({actionType: 'calc', value: -1}) }
	})

	var actErrorCenter = assign(es.map(function (payload, cb) {
	cb(null, payload)
	}), {
	error: function (err, _actionType) {
	this.write({actionType: _actionType \|\| err.name, value: err})
	}
	})

	// stores
	var value = 0

	var store = es.map(function (payload, cb) {
	if ('calc' !== payload.actionType) return cb()

	var _value = value + payload.value

	if (_value < 0) {
	var err = new Error('value must be over "0"')
	err.name = 'CalcError'
	actErrorCenter.error(err)
	return cb()
	}

	cb(null, (value = _value))
	})

	var storeErrorCenter = es.map(function (payload, cb) {
	if ('CalcError' !== payload.actionType) return cb()

	cb(null, payload.value)
	})

	// view(component)
	var view = es.map(function (value, cb) {
	view.view.innerHTML = String(value)
	cb()
	})

	var viewErrorCenter = es.map(function (err, cb) {
	viewErrorCenter.view.innerHTML = String(err)

	setTimeout(function () {
	viewErrorCenter.view.innerHTML = ''
	}, 2000)

	cb()
	})

	window.onload = function () {
	var $add = document.querySelector('#add')
	var $take = document.querySelector('#take')

	view.view = document.querySelector('#view')
	viewErrorCenter.view = document.querySelector('#errors')

	$add.onclick = act.add.bind(act)
	$take.onclick = act.take.bind(act)

	es.merge( act, actErrorCenter ).pipe(dispatcher)

	dispatcher.pipe(store).pipe(view)
	dispatcher.pipe(storeErrorCenter).pipe(viewErrorCenter)
	}
	<body>
	<button type="button" id="add" >+</button> \|\|
	<button type="button" id="take">-</button>
	<div id="view">--</div>
	<div id="errors"></div>
	<script src="./bundle.js"></script>
	</body>
	{
	"name": "flux-on-stream",
	"dependencies": {
	"event-stream": "^3.3.0",
	"object-assign": "^2.0.0"
	},
	"scripts": {
	"build": "browserify ./flux-on-stream.js -o ./bundle.js"
	}
	}