A straightforward React state manager wich sounds familiar
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.