76

Lightweight wrapper of React + Router + Redux-saga for SPA development.

Stats

StarsIssuesVersionUpdatedCreatedSize
76
0.0.44 years ago4 years agoMinified + gzip package size for 76 in KB

Readme

76

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

Ver Build Status Coverage Status npm download

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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.