Nourished Personal Mucus
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

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

install

npm i flux-action

Downloadsweekly downloads

3

version

0.3.0

license

MIT

last publish

collaborators

  • avatar
Report a vulnerability