nova-flux

flux-utils

A collection of utility classes for Flux implementation

Installing

npm install --save nova-flux

Using

First it's needed to create actions:

ES5:

var flux = require('nova-flux');
 
// To look more react-like
var MyActions = flux.createActions('createTodo', 'removeTodo');
// To look more classic
var MyActions = new flux.Actions('createTodo', 'removeTodo');
 

ES6:

 
import { Actions } from 'nova-flux';
 
var MyActions = new Actions('createTodo', 'removeTodo');
 

Actions can be called directly

// Actions can be called directly:
MyActions.createTodo(name, false); // Also, any number of arguments.

Then create an Store to use those actions:

ES5:

var flux = require('nova-flux');
 
// You ca use flux.createStore also
var MyStore = flux.createStore({
    actions: MyActions,
    methods: {
        addTodo(name, done) {
            let state = this.state; // deep copies it
            state.todos.push({ name, done });
            this.state = state; // Saves the new state and emit changes
        },
        removeTodo() {
 
        }
    },
    state: { todos: [] }
});
 
 

ES6:

 
import { Store } from 'nova-flux';
 
// You ca use flux.createStore also
var MyStore = new Store({
    actions: MyActions,
    methods: {
        addTodo(name, done) {
            let state = this.state; // deep copies it
            state.todos.push({ name, done });
            this.state = state; // Saves the new state and emit changes
        },
        removeTodo() {
 
        }
    },
    state: { todos: [] }
});
 

Now you can look out for events

When state is changed the event change is automatically fired:

Flux could be used without React but because is popular, here is a React component showing how it works.

 
class MyComponent extends React.Component {
 
    // ... More code ...
 
    onMyStoreChange = () => {
        // when you get the state is deep cloned, 
        // so no worries and no change to modify it.
        this.setState(MyStore.state); 
    }
 
    componentWillMount() {
        // Adding the handle
        MyStore.events.on('change', this.onMyStoreChange);
    }
 
    componentWillUnmount() {
        // Remove it when not needed
        MyStore.events.off('change', this.onMyStoreChange);
    }
 
    // ... More code ...
 
}
 

Events are using my custom Event Manager and they are using composition, instead of inheritance.