exstore

App container for Javascript with state management, service management use for React, Vue,...

Installation

npm install exstore --save

Basic Usage

1import {createStore} from 'exstore'
2import axios from 'axios'
3import Cookies from 'js-cookie'
4 
5const $api = axios.create()
6const $storage = {
7    getItem: key => Cookies.get(key),
8    setItem: (key, value) => Cookies.set(key, value, {expires: 3, secure: true}),
9    removeItem: key => Cookies.remove(key)
10}
11 
12const modules = {
13    counter: {
14        state: {current: 1},
15        actions: {
16            increase: ({state, commit}) => commit('COUNTER_INCREASE'),
17            decrease: ({state, commit}) => commit('COUNTER_DECREASE')
18        },
19        mutations: {
20            'COUNTER_INCREASE': (state) => state.current += 1,
21            'COUNTER_DECREASE': (state) => state.current -= 1,
22        },
23        getters: {
24            current: (state) => state.current,
25        },
26    }
27};
28 
29const persit = (_store) => {
30    let {$storage} = _store.getServices()
31    let saved = $storage.getItem('storekey');
32
33    if (saved) {
34        _store.replaceState({..._store.getState(), auth: JSON.parse(saved)})
35    }
36
37    _store.subscribe((msg) => $storage.setItem('storekey', JSON.stringify(_store.getState().auth)))
38}
39const log = (_store) => _store.subscribe((msg) => console.log(msg))
40const remoteControl = (_store) => {//...})
41const remoteDebug = (_store) => {//...})
42const devTool = (_store) => {//...})
43 
44const store = createStore({modules})
45    .attachServices({$api, $storage})
46    .attachPlugins([persit, log, remoteControl, remoteDebug, devTool])
47 
48//Listen for change
49store.subscribe((msg) => console.log(getStateCapture()))
50 
51//Call action
52store.actions.increase()

Usage with React.js or Native

1import React from 'react';
2import {connectReact as connect} from 'exstore'
3 
4class HomePage extends React.Component {
5    constructor(props) {
6        super(props);
7    }
8
9    render() {
10        let {current, increase, decrease} = this.props;
11
12        return (<div>
13            Counter is {current}
14            <button type="button" onClick={increase}>+1</button>
15            <button type="button" onClick={decrease}>-1</button>
16        </div>)
17    }
18}
19 
20const state =  ({getters}) => ({
21  current: getters.current()
22})
23 
24const actions =  ({actions}) => ({
25  increase: actions.increase,
26  decrease: actions.decrease
27})
28 
29export const Home = connect(state, actions)(HomePage)

Usage with Vue.js or Native

1import {connectVue, vueGetters, vueActions} from 'exstore'
2 
3Vue.use(connectVue)
4 
5new Vue({
6    computed: {...vueGetters(['current'])},
7    methods: {...vueActions(['increase', 'decrease'])},
8    template: '<div>{{ hi }}</div>'
9})

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,...