kazzkiq / react-swag

💎SWAG is a straightforward React state manager which sounds familiar for those who likes View-Model pattern.

SWAG is a straightforward React state manager wich sounds familiar for those who likes View-Model pattern.

Install

npm install --save react-swag

yarn add react-swag

Basic Setup

You will need two things, connect and createStore

★ connect(ReactComponent, Store)

★ createStore(Object or Class)

You get than like this :

import { createStore, connect } from 'react-swag';

Now you would like to create your store, with your data and methods as object properties.

const store = {
    counter: 1,
    add(){
        this.counter++;
    }
}
// you could also do this :
class Store = {
    constructor(){
        this.counter = 1
    }
    add(){
        this.counter++
    }
}

Now you create your presentation layer as a React Component directly accessing your store

const Component = () => (
    <div onClick={Store.add}>{Store.counter}</div>
)

now connect your component to the store if you want it to update on store changes

const ConnectedComponent = connect(Component, store);

BOOM ! its working.

LIVE DEMO

Things you need to know about SWAG

💎You can easily deal with async operations using ing helper

LIVE DEMO

💎Your changes to the store will always sync to the UI.

LIVE DEMO

💎You can connect to portions of your store.

LIVE DEMO

💎I am still thinking the whole nomenclature

💎I`d love to hear yout opinion

License

MIT