react-swag

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

const wait = time => new Promise(r => setTimeout(r, time));

const Store = createStore({
  ammount: 8,
  async lazyAdd() {
    await wait(1000).then(() => this.ammount++);
  }
});

const Component = connect(
  ({ ing }) => ing(Store.lazyAdd) ? "loading" : <div onClick={Store.lazyAdd}>{Store.ammount}</div>,
  Store
);

LIVE DEMO

What if you would like to have separated loading behaviors within the same method ?

const wait = time => new Promise(r => setTimeout(r, time));

const Store = createStore({
  ammount: 8,
  async lazyAdd(ammountToAdd) {
    await wait(1000).then(() => (this.ammount += ammountToAdd));
  }
});

const Component = connect(
  ({ ing }) => {
    return (
        <div>
            {Store.ammount}
            <br />
                {ing(Store.lazyAdd, [5]) ? 

                     "Loading ..." 
                    :
                    <input type="button" onClick={() => Store.lazyAdd(5)} value="add 5" />
                }

                {ing(Store.lazyAdd, [10]) ? 

                     "Loading ..." 
                    :
                    <input type="button" onClick={() => Store.lazyAdd(10)} value="add 10" />
                }
        </div>
    );
  }, Store );

LIVE DEMO

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

const Store = createStore({
  ammount: 8,
  add() {
    this.ammount++;
  }
});

setInterval(() => {
  Store.add();
}, 100);

const Component = connect(
  () => <div onClick={Store.add}>{Store.ammount}</div>,
  Store
);

LIVE DEMO

you can also direct set

Like this :

setInterval(() => {
  Store.add();
}, 100);

or this (for debugging purpose) :

window.store = Store

💎I am still thinking the whole nomenclature

💎I`d love to hear yout opinion

License

MIT