What
rabjs是一套封装了react,redux,react-redux,react-router,react-router-redux的前端框架,提供简单的api,创建复杂的SPA应用。
Install
方案1,通过waka创建rabjs项目
npm i -g waka-cli
waka init rabjs-webpack first-app
方案2,单独下载rabjs包
npm install --save rabjs
Quick Start
五步创建react,redux应用
import React from 'react';
import rab, { connect,createModel, put, call} from 'rabjs';
import { Router, Route } from 'rabjs/router';
function stop(time) {
return new Promise((res,rej)=>{
setTimeout(function() {res();},2000);
});
}
// 1,init rabjs
const app = rab();
// 2. create Model
let count = createModel({
namespace: 'count',
state: {
num:0,
loading:false
},
reducers: {
add(state,action) {
return Object.assign({},state,{num:state.num + 1})
},
minus(state) { return Object.assign({},state,{num:state.num - 1}) },
asyncAdd(state,action) { return Object.assign({},state,{num:state.num + action.payload}) },
asyncMinus(state,action) { return Object.assign({},state,{num:state.num + action.payload}) },
asyncNewApi:{
start(state,action){
return Object.assign({},state,{loading:true});
},
next(state,action){
return Object.assign({},state,{num:state.num + action.payload})
},
throw(state,action){
return Object.assign({},state,{num:state.num + action.payload})
},
finish(state,action){
return Object.assign({},state,{loading:false});
}
}
},
actions:{
//高阶异步action 可以获取全局的state,put
asyncAdd: (a, b, c) => async ({getState, dispatch,call}) => {
console.log('----->', getState(), dispatch)
await stop();
return 100;
},
//正常异步action
async asyncMinus() {
await stop();
return -100;
},
async asyncNewApi() {
await stop();
return -100;
}
},
subscriptions:{
init({history, dispatch}){
history.listen((location) => {
console.log('init------------>',location)
})
}
}
})
app.addModel(count);
// 3. init react components
const App = connect(({ count }) => ({
count
}))((props) => {
return (
<div>
<h2>{ props.count.num }</h2>
<h2>{ !props.count.loading?'finish':'loading' }</h2>
<button key="add" onClick={() => { put({type: 'count.add' ,payload:{a:1}});}}>+</button>
<button key="minus" onClick={() => { props.dispatch({type: 'count.minus' }); }}>-</button>
<button key="asyncadd" onClick={() => { props.dispatch(count.actions.asyncAdd()); }}>ASYNC ADD</button>
<button key="asyncminus" onClick={() => { put({type: 'count.asyncMinus',payload:{a:1,n:2} }); }}>ASYNC Minus</button>
<button key="asyncNewApi" onClick={() => {put({type: 'count.asyncNewApi'}); }}>asyncNewApi</button>
</div>
);
});
// 4. Add Router
app.router(({ history }) => {
return (
<Router history={history}>
<Route path="/" component={App} />
</Router>
);
});
// 5. Start
app.start('#demo_container');