Valse

Valse is a state management based on Redux. Better than Redux, In Valse just need to write init state and actions.

Valse supports modularized and object-oriented thoughts let you easy to understand and maintain the state of the app.

Install

npm install valse --save

Getting Start

1. Create Valse module

import Valse from 'valse';

const userModule = Valse.createModule({
  root: 'user',
  state: {
    id: null,
    name: '',
    admin: false,
    loading: false,
  },
  actions: {
    setAdmin() {
      this.$set('admin', true);
    },
    async loadUser() {
      const id = this.$get('id');
      this.$set('loading', true);
      const {
        name,
        admin,
      } = await window.fetch(`/user/${id}`);
      this.$assign({
        name,
        admin,
        loading: false,
      });
    },
  },
});

export default userModule;

2. Connect to React Component

Valse integration react-redux. So can easy connect Valse module to React.

import userModule from './user';
import { UserComponent } from './Components';

const UserContainer = userModule.connect(UserComponent);
export default UserContainer;

3. start Valse

Have two ways to start Valse.

The simple way is delegate all store state by Valse.start().

import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import Valse from 'valse';
import UserContainer from './Container';

const store = Valse.start(); // you can pass other middlewares like Valse.start([reduxLogger])
ReactDOM.render(
  <Provider store={store}>
    <UserContainer />
  </Provider>
)

The advanced way is create store by Redux API createStore and manual load Valse's middleware and reducer to the store.

NOTICE use this way must create module by Valse.createModule before Valse.buildReducer.

import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { browserHistory } from 'react-router'
import { routerReducer, routerMiddleware } from 'react-router-redux';
import Valse from 'valse';
import UserContainer from './Container';

const middleware = applyMiddleware(Valse.middleware, routerMiddleware(browserHistory));
const reducer = combineReducers({
  ...Valse.buildReducer('modules'),
  routing: routerReducer,
});
const store = createStore(reducer, middleware);
ReactDOM.render(
  <Provider store={store}>
    <UserContainer />
  </Provider>
)