GitHub

dva - #Reactjs and #Redux based, lightweight and #elm-style framework 

via @MicheleBertoli

  • dva Knowledgemap – All knowledge points needed to create a dva app.
  • But if you like create-react-app , feel free to read Creating dva app with create-react-app .
  • Initialize a new dva app.
  • Triggered by actions , can call actions .
  • effects: asynchronous operations that don’t modify state directly.

dva – :bulb: React and redux based, lightweight and elm-style framework. (Inspired by choo)

@jsterlibs: dva – #Reactjs and #Redux based, lightweight and #elm-style framework

via @MicheleBertoli

React and redux based, lightweight and elm-style framework. (Inspired by choo)

import dva, { connect } from ‘dva’; // 1. Create app const app = dva(); // 2. Add plugins (optionally) app.use(plugin); // 3. Register models app.model(model); // 4. Connect components and models const App = connect(mapStateToProps)(Component); // 5. Config router with Components app.router(routes); // 6. Start app app.start(‘#root’);

step by step.

import { browserHistory } from ‘dva/router’; const app = dva({ history: browserHistory, });

e.g.

yield put({ type: actionType, payload: attachedData, error: errorIfHave });

dispatch({ type: actionType, payload: attachedData, error: errorIfHave });

e.g.

const result = yield call(api.fetch, { page: 1 });

e.g.

const count = yield select(state => state.count);

app.model({ namespace: ‘count’, state: 0, reducers: { add(state) { return state + 1; }, minus(state) { return state – 1; }, }, effects: { * addDelay(action, { call, put }) { yield call(delay, 1000); yield put({ type: ‘add’ }); }, }, subscriptions: { // Monitor keyboard input keyboard({ dispatch }) { return key(‘ctrl+up’, () => { dispatch({ type: ‘addDelay’}); }); }, }, });

e.g.

import { Router, Route } from ‘dva/routes’; app.router(({ history } => ({ < /Router> });

GitHub