nanoflux

 

 

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!

Current Version:

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

Features

Lightweight

3.5 KiB minified, 1.5 KiB gzipped Micro-library

Flexible

Optional Action Creators, Multiple Dispatchers, Chainable Stores

Succinct

Convention-based Action-Mapping, Intuitive Factory Methods

Performant

Purely Synchronous Functional Approach

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

Know more

Nanoflux Fusion

Evolved

Redux-inspired superset of Nanoflux

Easy

Even less code, even more comfortable

Immutable

Only store can alter the application state.

Asynchronous

Supports A+-compliant Promises out of the box

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

Know more about Fusion

Credits

This page is build on top of {Personal} theme

The nanoflux icon and others are designed by Freepik.

Snabbt.js. for special FX.