TinyFlux

TinyFlux is a predictable state container for JavaScript apps.

It is very very tiny,just 150 line source code and has no dependencies

You can read an overview of ReFlux here

╔═════════╗       ╔════════╗       ╔═════════════════╗
║ Actions ║──────>║ Stores ║──────>║ View Components ║
╚═════════╝       ╚════════╝       ╚═════════════════╝
     ^                                      │
     └──────────────────────────────────────┘

Hower when we write more reflux , we will find action is more unnecessary.

action is almost equal the store method!

we always copy store method to action for declare action,so unnecessary.

╔════════╗       ╔═════════════════╗
║ Stores ║──────>║ View Components ║
╚════════╝       ╚═════════════════╝
     ^                   │
     └───────────────────┘

So this is the tinyflux architecture

we no longer declare action ever

action is generate by store method!

less is more!

Install

npm install --save tinyflux

Examples

• Counter (source)
• Todo (source)
• Async (source)
• Real-World (source)

How To Use

ONLY 1 MINUTE , YOU KNOW EVERYTHING ABOUT TINYFLUX

Store

import TinyFlux from 'tinyflux';
 
//1.create Store by TinyFlux.createStore
//2.set your action function
//3.set your get function
//ok that's all
let Store = TinyFlux.createStore({
    getInitialState(){
        return 0;
    },
    increment(){
        this.state++;
    },
    decrement(){
        this.state--;
    },
    get(){
        return this.state;
    }
});
export default new Store();

Component

import TinyFlux from "tinyflux"
import React from "react"
import Store from "./store"
 
//1.create Component by TinyFlux.createComponent
//2.create mapStateToProps for map store data to component data
//3.connect 1 and 2 
//ok that's all
let Component = TinyFlux.createComponent({
    render(){
        return (
            <div>
                <div>{this.props.counter}</div>
                <button onClick={Store.increment}>increment</button>
                <button onClick={Store.decrement}>decrement</button>
            </div>
        );
    }
});
 
function mapStateToProps(){
    return {
        counter:Store.get()
    }
}
export default TinyFlux.connect(mapStateToProps,Component);

License

MIT