DvaJS

• DvaJS 官网

• 知识地图: 简单描述用到的各个知识点，建议先浏览

• 路由：React-Router

• 架构：Redux

• 异步操作：Redux-saga

dva = React-Router + Redux + Redux-saga

是什么

关键字 yield

function* 生成器函数

function* 这种声明方式(function关键字后跟一个星号）会定义一个生成器函数 (generator function)，它返回一个 Generator 对象。

用法

Effect

• put: 用于触发 action 。相当于 dispatch
• call: 用于调用异步逻辑，支持 promise 。
• select: 用于从 state 里获取数据。

app.model({
  namespace: 'todos',
  effects: {
    *addRemote({ payload: todo }, { put, call, select }) {
      const user = yield select(state => state.user);
      const result = yield call(fetch, user.id);
      yield put({ type: 'todos/add', payload: result });
    },
  },
});

计算器例子：

import React from 'react';
import dva, { connect } from 'dva';
import './style.css';

// 1. Initialize
const app = dva();

console.log(2);

// 2. Model
app.model({
  namespace: 'count',
  state: 0,
  reducers: {
    add  (count) { return count + 1 },
    minus(count) { return count - 1 },
  },
});

class TestError extends React.Component {
  componentDidCatch(e) {
    alert(e.message);
  }
  componentDidMount() {
    // throw new Error('a');
  }
  render() {
    return <div>TestError</div>
  }
}

// 3. View
const App = connect(({ count }) => ({
  count
}))(function(props) {
  return (
    <div>
      <TestError />
      <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(() => <App />);

// 5. Start
app.start('#root');