flux-action

0.3.0 • Public • Published

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')
    }
})

Package Sidebar

Install

npm i flux-action

Weekly Downloads

1

Version

0.3.0

License

MIT

Last publish

Collaborators

  • radubrehar