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};
        },
      },
}