Uniflow is a flux-inspired unidirectional data flow library. It works great with
React, but it could be used just as easily with any other view library. The
primary goal of Uniflow is simplicity. The entire lib
directory can be
read and understood in minutes. Give it a try!
Features
Actions
- An actions object is an
EventEmitter
(eventemitter3). - Action methods are auto-bound to the actions object. This is great for passing actions directly as callbacks to other functions.
- Action methods have a partial method. It does what you would expect. For example:
<button onClick={itemActions.deleteItem.partial(this.props.id)}>Delete</button>
. - Action methods emit events using
this.emit('event-name', payload)
. - Async code belongs here.
Stores
- A store object is an
EventEmitter
. (Notice the pattern?) - The
store.state
property should only be mutated usingstore.setState()
orstore.replaceState()
- Emits a
'change'
event when thestate
changes. It uses shallow equality to test ifstate
has changed similar to how PureRenderMixin works in React. - Works well with Immutable.js values as properties of
state
. - Should never contain async code.
Dispatcher
- There is no dispatcher!
Installation
$ npm install uniflow --save
Usage
Example
var uniflow = var superagent = var resourceUrl = '[some url]' // define actionsvar PersonActions = uniflow // define storevar PersonStore = uniflow // stores subscribe to actionsPersonActions PersonActions PersonActions // views subscribe to storesPersonStore // views initiate actionsPersonActions
API
Actions
actions = uniflow.createActions(proto)
proto
object
Creates an Actions object with all of the properties of proto
. Within the methods of proto
be sure to call this.emit('<name of action>')
for listening stores to update properly. Asynchronous tasks, like fetching data, should be performed in Actions.
actions.on
, actions.once
, actions.emit
, etc.
See eventemitter3 and Node.js events documentation for details.
Store
store = uniflow.createStore(proto)
proto
object
Creates a Store object with all of the properties of proto
. A Store should listen to Actions and call this.setState(newState)
to keep itself up to date. A change
event will be emitted automatically when the Store has updated its state. Stores should be completely synchronous.
store.state
Holds the current values for the store. By default, the initial state
is an empty object ({}
). You can override the initial state
by declaring a state
property in proto
.
store.setState(newState)
newState
object
Merges newState
with the current state
. If any properties have changed, store
emits a "change"
event. This comparison is shallow, so see the following examples to ensure "change"
occurs when you expect it to.
// don't ever do thisthisstatefoo = 'updated';this; // do this insteadthis; // don't do this eithervar bar = thisstatebar;barbaz = 'updated';this; // do something like this insteadvar bar = _;this;
store.on
, store.once
, store.emit
, etc.
See eventemitter3 and Node.js events documentation for details.