React dva 的使用

各大传送门：

DvaJS Github

DvaJS API与示例

了解 dva

- dva = React-Router + Redux + Redux-saga + fetch

- dva的初衷是（其实应该是redux的初衷）。提供一个公共的顶层的状态管理工具，专门为view层服务（实现双向数据流），而让react只专注专心负责渲染view层。

dva项目入口初始化

在初始化的时候，指定使用的路由模式，这里使用了hash模式。

import dva from 'dva';
import createHistory from 'history/createHashHistory';
// user BrowserHistory
// import createHistory from 'history/createBrowserHistory';

// 1. Initialize
const app = dva({
  history: createHistory(),
});

dva的几个规则:

1、通过dispatch调用namespace/effects

2、state(状态)

3、effects (异步操作)

- 函数必须带*，也就是生成器。

- 第一个参数，可以拓展为{payload, callback}

- 第二个参数，call和put

- call 就是调用 async的action函数

- put就是调用reducers的函数来更新state。

4、reducers

5、dva是以model为单位的，所有的应用逻辑都在上面

简而言之总结一下吧。开发dva分为两个阶段：

1、准备阶段：

- 定义 state 状态，用以绑定到 view 层；

- 定义 effects

- call用来调用 action，类似dispatch

- put用来调用reducers

- 定义 sync action 函数，用来进行异步请求；

- 定义 reducers 函数，用来更新 state。

2、调用阶段：

拿到dispatch

const { dispatch } = this.props
dispatch({type: 'count/add'}) // this.props.dispatch({type: 'count/add'})

可以直接调用 effects， 也可以直接调用reducers。如果是同名的话，会一起调用。优先执行reducers。

【dispatch 方法从哪里来？被 connect 的 Component 会自动在 props 中拥有 dispatch 方法。】

简单示例伪代码

/**
 * 一、index.js 调用示例
    handleClick () {
        const { dispatch } = this.props
        dispatch({ type: 'todo/save' }
    }

    二、async func 示例
    export async function saveTodoToServer(codetype) {
        return request(/api/framework/sys/code/list?codetype= + codetype);
    }
 */

export default {
    namespace: 'todo',

    state: {}, // 也可以是数组： []

    effects: {
        *save({ payload, callback }, { put, call }) {
          // 调用 async func saveTodoToServer
          yield call(saveTodoToServer, todo);
          // 调用 reducers 更新 state 可以自由传递任何参数，必须保留type
          yield put({ type: 'add', title: payload.title, text: payload: text, time: payload: time });
        },
    },

    reducers: {
        // 比较推荐es6的这样写：add(state, { title, text, time })
        add(state, action) {
          const title = action.title
          const text = action.text
          const todo = {
              title: action.title,
              text: action.text,
              time: action.time
          }
          // 保存数据到 state
          return {...state, todo};
        },
      },
}