DEPRECATED: This library is deprecated, please use dva or yax
Front-end framework based on react, redux, react-redux, react-router and redux-saga, inspired by elm and choo. Fork from dva.
$ npm install --save fef
Let's create an count app that changes when user click the + or - button.
import React from 'react';
import fef, { connect, router } from 'fef';
const { Router, Route } = router;
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
// 1. Initialize
const app = fef();
// 2. Model
app.model({
namespace: 'count',
state: 0,
reducers: {
addDone(data, state) { return state + 1 },
minusDone(data, state) { return state - 1 }
},
effects: {
*add(data, state, send) {
yield delay(1000);
yield send('count:addDone');
},
*minus(data, state, send) {
yield delay(1000);
yield send('count:minusDone');
}
}
});
// 3. View
const App = connect(({ count }) => ({
count
}))(function(props) {
return (
<div>
<h2>{ props.count }</h2>
<button key="add" onClick={() => { props.dispatch({type: 'count:add'})}}>+</button>
<button key="minus" onClick={() => { props.dispatch({type: 'count:minus'})}}>-</button>
</div>
);
});
// 4. Router
app.router(({ history }) =>
<Router history={history}>
<Route path="/" component={App} />
</Router>
);
// 5. Start
app.start(document.getElementById('root'));
fef is available under the terms of the MIT License.