tap-flux v0.10.0
Tap Flux

Tap Flux makes writing React apps with Flux architecture really simple. We designed Tap Flux for reusable modules from the ground up.
Install
npm i tap-flux -S
Getting Started
var tapFlux = require('tap-flux');
var TodoList = tapFlux.createModule();
TodoList
.createActionTypes({
ADD_ITEM: '',
REMOVE_ITEM: ''
})
.createActions({
addItem: function(item) {
this.dispatch({
type: this.actionTypes.ADD_ITEM,
data: item
});
},
removeItem: function(index) {
this.dispatch({
type: this.actionTypes.REMOVE_ITEM,
data: index
});
}
})
.createStore('itemStore', {
items: [],
getItems: function() {
return this.items
},
getItem: function(index) {
return this.items[index];
},
onAddItem: function(item) {
this.items = this.items.concat(item);
},
onRemoveItem: function(index) {
this.items = this.items.splice(index, 1);
}
});
How it works
Module methods can be chained (above) or they can also be split into separate files:
var TodoList = require('./TodoList');
TodoList.createActionTypes({
ADD_ITEM: '',
REMOVE_ITEM: ''
});
Nothing is exported because all parts of a module are accessed through the module:
createActionTypes
Attaches constants to TodoList.actionTypes
.
Recursively Mirrors the key-value pairs so that
the object's values can be whatever you want.
The above example would produce:
TodoList.actionTypes.ADD_ITEM //=> 'ADD_ITEM'
TodoList.actionTypes.REMOVE_ITEM //=> 'REMOVE_ITEM'
createActions
Attaches actions to TodoList.actions
.
The above example would produce:
TodoList.actions.addItem //=> Function
TodoList.actions.removeItem //=> Function
createStore
Attaches a store to TodoList.stores
.
Methods that have the onDoThing
syntax
are linked to actionTypes, so onDoThing
is ran everytime DO_THING
is emitted.
A warning will be sent to your console
if you have unlinked actionTypes or
setter functions.
The above example would produce:
TodoList.stores.itemStore //=> Store
Overview
Our mission is abstract away all the flux boilerplate and provide a basic modular structure for scalable applications.
One Tap Flux
You have one Tap Flux instance per application consisting of:
- Flux Dispatcher
Modules
A Tap Flux module is a self contained reusable feature consisting of:
- Constants
- Actions
- Stores
- Preregistered with the dispatcher.
waitFor([])
is supported inline anywhere in an action handler.alwaysWaitFor = []
allows thisStore's all action handlers to always wait for thatStore to finish updating.
Examples
We've rewritten the Facebook's Flux Chat Example in /examples/tap-flux-chat
.
Development
Setup
npm start
- Installs dependencies and starts gulp.
Hacking
gulp
- Build, watch for changes, and serve doc site.- Hack on
/src
. Builds are automatically created, but not published to npm. - Commit and push changes.
Testing
npm test
- Run unit tests.npm run test-watch
- Run unit tests, watch for changes and rerun.
Documentation
gulp doc
- Generates documentation.
Publish
After merging a PR:.
- Checkout and pull master
npm adduser
- add your npm user, this is only needed once.gulp deploy -v <major|minor|patch|premajor|preminor|prepatch|prerelease> [-m <commit message>]
This will update /dist
, /docs
, and publish a new version of the npm package.
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago