About

nanoflux is a very tiny and self-containing implementation (3.5 KiB minified, 1.5 KiB gzipped) of the Flux architecture. It offers a comfortable API, reduces boilerplate code, has absolutely no dependencies and can be used in any component based context, e.g. ReactJS, Angular, Polymer, RiotJS etc.

Support the repo by starring or forking it!

You may have a look at NanoFlux Fusion - an extended version of NanoFlux inspired by Redux

Features

Quickstart

Or go straight to documentation

Pull package from npm or bower

    npm install nanoflux --save
    bower install nanoflux

Setup NanoFlux globally at the application's entry point, before any usage of NanoFlux.
In this scenario we pretend to use a single *Dispatcher* only,
although NanoFlux provides the ability to create multiple dispatchers.

    import NanoFlux from 'nanoflux';
    window.NanoFlux = NanoFlux;
    // creates a named dispatcher, which is also accessible using NanoFlux.getDispatcher('dispatcher');
    // Here we use the 'fluxy' way, where actions are part of the dispatcher.
    // This way we avoid the need of additional action creators, reducing code.
    // Note: The action names are used for stores function mapping, e.g. 'addProduct' maps to 'onAddProduct'
    window.NanoFlux.Dispatcher = NanoFlux.createDispatcher('dispatcher', ['addProduct','loadProducts'] );

Define your *Store* in a separate file.

    // it's highly recommended to use immutable structures
    import Immutable from '../node_module/seamless-immutable/seamless-immutable.production.min';
    import ProductService from './services/productservice';

    var _products = Immutable([]);

    // creates a store with name 'productStore'. It is assumed that NanoFlux is already global.
    // the store is accessible using NanoFlux.getStore('productStore')
    var store = NanoFlux.createStore('productStore', {
        // a state getter usable by subscribed views
        getProducts : {
            return _products; // remember: it's immutable
        },
        // onLoadProducts is automatically mapped (convention) to action 'loadProducts'
        onLoadProducts : function(){
            // as we use the fluxy way, we need to handle async calls here,
            // otherwise we would use them in action creator
            ProductService.loadProducts().then( (products) => {
                    _products = Immutable(products);
                    this.notify(); // notifies all subscribed views
                }
            );
        },
        onAddProduct : function(product){
            _products = _products.concat(Immutable(product));
            this.notify();
        }
    });

    // Now, we connect the store to our globally set dispatcher.
    NanoFlux.Dispatcher.connectTo(store);

Pronto! Now, we are ready to use our store in our components.

    class ProductContainer extends React.Component{

        constructor(props){
            super(props);
            this.state = { products : [] };
            this.productStore = NanoFlux.getStore('productStore'); // getting our store
            // next line binds 'this' to our callback, so there's no need for additional binding
            this.subscription = this.productStore.subscribe(this, this.onProductsUpdated);
        }

        onProductsUpdated(){
            let products = this.productStore.getProducts();
            this.setState({ products : products});
        }

        componentDidMount(){
            NanoFlux.Dispatcher.loadProducts();
        }

        componentWillUnmount(){
            // stop listening to store changes.
            this.subscription.unsubscribe();
        }

        render(){
            // ... your render stuff
        )
    }
});

Nanoflux Fusion

Nanoflux Fusion is an evolved/extended version of Nanoflux. It is built on top of it, and entirely compatible with Nanoflux. Like Nanoflux itself, Fusion is a completely dependency-less and micro-sized implementation (5.9 KiB minified, 2.15 KiB gzipped). Inspired by Redux, it uses functions to define the application state. This way, managing the application state is even more comfortable. Furthermore, Nanoflux Fusion guarantees immutable application states, making it still more robust and free of undesired side-effects, and supports asynchronous actions out-of-the-box.

Visit and star the project on Github

Credits

This page is build on top of {Personal} theme

The nanoflux icon and others are designed by Freepik.

Snabbt.js. for special FX.