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.

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:

1. Flux Dispatcher

Modules

A Tap Flux module is a self contained reusable feature consisting of:

1. Constants
2. Actions
3. 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

1. npm start - Installs dependencies and starts gulp.

Hacking

1. gulp - Build, watch for changes, and serve doc site.
2. Hack on /src. Builds are automatically created, but not published to npm.
3. Commit and push changes.

Testing

1. npm test - Run unit tests.
2. npm run test-watch - Run unit tests, watch for changes and rerun.

Documentation

1. gulp doc - Generates documentation.

Publish

After merging a PR:.

1. Checkout and pull master
2. npm adduser - add your npm user, this is only needed once.
3. 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.