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.
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago