76

    0.0.4 • Public • Published

    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.

    Keywords

    none

    Install

    npm i 76

    DownloadsWeekly Downloads

    2

    Version

    0.0.4

    License

    ISC

    Last publish

    Collaborators

    • atool