README
exstore
App container for Javascript with state management, service management use for React, Vue,...
Installation
npm install exstore --save
Basic Usage
import {createStore} from 'exstore'
import axios from 'axios'
import Cookies from 'js-cookie'
const $api = axios.create()
const $storage = {
getItem: key => Cookies.get(key),
setItem: (key, value) => Cookies.set(key, value, {expires: 3, secure: true}),
removeItem: key => Cookies.remove(key)
}
const modules = {
counter: {
state: {current: 1},
actions: {
increase: ({state, commit}) => commit('COUNTER_INCREASE'),
decrease: ({state, commit}) => commit('COUNTER_DECREASE')
},
mutations: {
'COUNTER_INCREASE': (state) => state.current += 1,
'COUNTER_DECREASE': (state) => state.current -= 1,
},
getters: {
current: (state) => state.current,
},
}
};
const persit = (_store) => {
let {$storage} = _store.getServices()
let saved = $storage.getItem('storekey');
if (saved) {
_store.replaceState({..._store.getState(), auth: JSON.parse(saved)})
}
_store.subscribe((msg) => $storage.setItem('storekey', JSON.stringify(_store.getState().auth)))
}
const log = (_store) => _store.subscribe((msg) => console.log(msg))
const remoteControl = (_store) => {//...})
const remoteDebug = (_store) => {//...})
const devTool = (_store) => {//...})
const store = createStore({modules})
.attachServices({$api, $storage})
.attachPlugins([persit, log, remoteControl, remoteDebug, devTool])
//Listen for change
store.subscribe((msg) => console.log(getStateCapture()))
//Call action
store.actions.increase()
Usage with React.js or Native
import React from 'react';
import {connectReact as connect} from 'exstore'
class HomePage extends React.Component {
constructor(props) {
super(props);
}
render() {
let {current, increase, decrease} = this.props;
return (<div>
Counter is {current}
<button type="button" onClick={increase}>+1</button>
<button type="button" onClick={decrease}>-1</button>
</div>)
}
}
const state = ({getters}) => ({
current: getters.current()
})
const actions = ({actions}) => ({
increase: actions.increase,
decrease: actions.decrease
})
export const Home = connect(state, actions)(HomePage)
Usage with Vue.js or Native
import {connectVue, vueGetters, vueActions} from 'exstore'
Vue.use(connectVue)
new Vue({
computed: {...vueGetters(['current'])},
methods: {...vueActions(['increase', 'decrease'])},
template: '<div>{{ hi }}</div>'
})
Tools
- exstore-devtools Devtools for exstore (coming soon)
- react-ssr-jest Reactjs starter kit with exstore, jest, webpack 4, ssr,...
- vue-ssr-jest Vue 2.x starter kit with exstore, jest, webpack 4, ssr,...