SWAG

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

View demo View Github

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.

Demo

LIVE DEMO

Things you need to know about SWAG

?You can easily deal with async operations using ing helper

Demo

LIVE DEMO

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

Demo

LIVE DEMO

?You can connect to portions of your store.

Demo

LIVE DEMO

?I am still thinking the whole nomenclature

?I`d love to hear yout opinion

GitHub