Fef NPM | npm.io

FEF ( Front-End Framework )

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.

Getting Started

Install

$ npm install --save fef

Usage Example

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'));