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.