waef-reactkit

react small startKit for waef. Using React,Redux,Redux Saga

Install

$ npm install waef-reactkit
$ npm install react react-dom

Usage

import app from 'waef-reactkit';

app.config({
  historyType: 'browser' // support 'browser','hash'.default 'hash'
});

// regist react routes.usage same to react-redux. eg see below
app.registRouter(require('./routes/')); 

// regist models;
app.registModel(require('./models/userInfo'));
// app.registModel(others); 

//start app 
app.start(rootId);//rootId default 'root'

route sample

import React from 'react';
import { Router, Route, IndexRoute } from 'waef-reactkit/lib/router';//important
import App from '../containers/app';
import Index from '../containers/index';

export default ({history, dispatch}) => {
    return <Router history={history}>
        <Route path='/' component={App}>
            <IndexRoute component={Index} />
        </Route>
    </Router>
}

model sample

import app, { baseModel } from 'waef-reactkit';
import fetch from 'isomorphic-fetch';

class modelDemo extends baseModel {
    constructor() {
        super('modelDemo', { //set model name to modelDemo
            pageIndex: 1,
            pageSize: 10,
            totalCount: 0,
            items: []   // initial state
        })
        reducers = (() => {
            const that = this;
            return {
                deleUserLocal(state, {payload}) {
                    // you can call that.getState() to get curr state
                    const {uid} = payload;
                    const items = state.items.slice(0);
                    const {totalCount} = that.getState();
                    for (let i = 0, len = items.length; i < len; i++) {
                        if (items[i].uid === uid) {
                            items = items.splice(i, 1);
                            break;
                        }
                    }
                    return Object.assign({}, state, { items, totalCount: totalCount - 1 });
                }
                // other reducers.these reducers can effect in time
                // each reducer must return a json object like state defined
            }
        })()
        effects = (() => {
            const that = this;
            return {
                fetchItems({payload}, {...sagaEffects}) {
                    // you can call that.getState() to get curr state
                    const {pageIndex} = payload;
                    const {pageSize} = that.getState();
                    const items = fetch(`api/user/getItems/${pageSize}/${pageIndex}`);
                    that.setState({
                        items
                    })
                }
                // other effects.these effects need ajax or async
                // you can call that.setState(newState) to update curr state
            }
        })()
        actions = (() => {
            const that = this;
            return {
                fetchItems(pageIndex) {
                    return that.createAction('*fetchItems', { pageIndex });
                },
                deleUserLocal(uid) {
                    return that.createAction('deleUserLocal', { uid });
                }
                // createAction(reducer/effect name,payload);
            }
        })()
    }
}

const model = new modelDemo();
app.registModel(model);// regist model. important

// you can call model.getState() or model.setState() everywhere;

redux connect

import React, { PropTypes, Component } from 'react';
import { connect } from 'waef-reactkit/lib/redux';//important

const App = ({children}) => {
    return (
        <div>
            {children}
        </div>
    )
}
App.propTypes = {}

export default connect()(App);
// api same to react-redux

License

MIT