76

Lightweight (300 lines) wrapper of React + Redux + Router + saga for SPA development.

Install

npm i -S 76

Usage

import { Application, Module } from '76';
 
const app = new Application('test-app');
 
const module = new Module('user-list', {
  initialState,
  selectors,
  reducers,
  watchers,
});
 
app.addModule(module);
 
app.setRouter(router);
 
app.start('#web-container', () => { console.log('app start success!'); })

How to write initialState, selectors, reducers, watchers of module?

• initialState

initialState is the initial state of module, used to initial store of redux. It is a pure object.

const initialState = {
  domain: {
    users: [],
  },
  ui: {
    loading: false,
  },
};

• selectors

selectors is used to select the data of module state.

const selectors = {
  getUserList: state => state.domain.users
};

• reducers

reducers is a pure function transform old state to new state.

const reducers = {
  addUser: (state, user) => {
    // use immutable-helper
    return update(state, {
      domain: {
        users: {
          $push: [user],
        },
      },
    });
  },
  ...
};

• watchers

watchers is the redux action with side-effect, see document of redux-saga.

const watchers = [{
  take: 'takeEvery',
  actions: 'addUserAsync',
  generator: function*(selectors, actions, { payload }) {
    // do something with effects.
  },
}];

TODO

• Project website developed by 76.

License

ISC@hustcc.