tap-flux

Tap Flux

Tap Flux makes writing React apps with Flux architecture really simple. We designed Tap Flux for reusable modules from the ground up.

Read the Docs

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.