flux-action

A simple alternative to the flux architecture for ReactJS.

No stores and dispatchers, just actions.

Install

$ npm install flux-action

Usage

First, create the actions, in actions.js

var FluxAction = require('flux-action')

var Actions = FluxAction([
    'PropertyUpdate',
    'PropertyDelete',
    'NameUpdate',
    'AgeUpdate'
])
//or FluxAction('PropertyUpdate'), for a single action

Actions.NameUpdate.publisher(function(value){
    return ['name', value]
})

Actions.AgeUpdate.publisher(function(value){
    return ['age', value]
})

module.exports = Actions

Each action is just a function, that when executed, calls all registered functions.

In order to have a flexible means of publishing various params to functions registered to actions, we introduce the concept of publishers.

Publishers are simple functions that based on the params the action was called with return an array with the params to be dispatched to listeners.

Now in Component.jsx, you can use the action

var React = require('react')
var Actions = require('./actions')

module.exports = React.createClass({
    componentWillMount: function(){
        this.unregisterName = Actions.NameUpdate.register(this.onPropertyUpdate, /* scope */ this)
    },
    componentWillUnmount: function(){
        this.unregisterName()
    },
    onPropertyUpdate: function(name, value){
        console.log('Property ', name, ' has been updated to ', value, '.')
    },
    render: function(){
        <button onClick={this.handleClick}>Update name</button>
    },
    handleClick: function(){
        Actions.NameUpdate('new name value')
    }
})