關於dva框架的簡單操做以及demo

關於dva的心得

因爲以前都用react+redux。此次接觸到dva框架簡單學習下。 本篇文章主要講解了dva框架中開發經常使用API和一些使用技巧，若是想查看更多更全面的API,請參照dva官方文檔: 官方demo

簡單的安裝步驟

1.首先全局安裝dva-cli

$ npm install -g dva-cli
複製代碼

2.接着使用dva-cli建立咱們的項目文件夾,這裏mydva是項目名字，本身隨意。

$ dva new mydva
複製代碼

3.進入mydva目錄，安裝依賴，執行以下操做。

$ cd myapp
$ npm start
複製代碼

4.啓動成功以後界面以下

5.文件目錄以及分析

├── mock    // mock數據文件夾
├── node_modules // 第三方的依賴
├── public  // 存放公共public文件的文件夾
├── src  // 最重要的文件夾，編寫代碼都在這個文件夾下
│   ├── assets // 能夠放圖片等公共資源
│   ├── components // 就是react中的木偶組件
│   ├── models // dva最重要的文件夾，全部的數據交互及邏輯都寫在這裏
│   ├── routes // 就是react中的智能組件，不要被文件夾名字誤導。
│   ├── services // 放請求借口方法的文件夾
│   ├── utils // 本身的工具方法能夠放在這邊
│   ├── index.css // 入口文件樣式
│   ├── index.ejs // ejs模板引擎
│   ├── index.js // 入口文件
│   └── router.js // 項目的路由文件
├── .eslintrc // bower安裝目錄的配置
├── .editorconfig // 保證代碼在不一樣編輯器可視化的工具
├── .gitignore // git上傳時忽略的文件
├── .roadhogrc.js // 項目的配置文件，配置接口轉發，css_module等都在這邊。
├── .roadhogrc.mock.js // 項目的配置文件
└── package.json // 當前整一個項目的依賴
複製代碼

簡單的demo,參考 官方的計算的demo

1.首先來修改 route/IndexPage.js

import React from 'react';
import { connect } from 'dva';
import styles from './IndexPage.css';

class IndexPage extends React.Component {
  render() {
    const { dispatch } = this.props;

    return (
      <div className={styles.normal}>
        <div className={styles.record}>Highest Record: 1</div>
        <div className={styles.current}>2</div>
        <div className={styles.button}>
          <button onClick={() => {}}>+</button>
        </div>
      </div>
    );
  }
}

export default connect()(IndexPage);
複製代碼

2.其次來修改樣式routes/IndexPage.css

.normal {
  width: 200px;
  margin: 100px auto;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 0 20px #ccc;
}
.record {
  border-bottom: 1px solid #ccc;
  padding-bottom: 8px;
  color: #ccc;
}
.current {
  text-align: center;
  font-size: 40px;
  padding: 40px 0;
}
.button {
  text-align: center;
}
button {
  width: 100px;
  height: 40px;
  background: #aaa;
  color: #fff;
}
複製代碼

3.界面顯示以下

4.在model 裏面去處理 state ，在頁面輸出 model 中的 state

(1)首先咱們在index.js中將models/example.js，即將model下一行的的註釋打開。

import './index.css';

import dva from 'dva';
import model from './models/example'
import router from './router'

// 1. Initialize 建立dva實列
const app = dva();

// 2. Plugins 裝載插件（可選）
// app.use({});

// 3. Model 註冊modal
app.model(model);

// 4. Router 配置路由
app.router(router);

// 5. Start 啓動應用
app.start('#root');
複製代碼

(2)接下來咱們進入 models/example.js，將namespace 名字改成 count，state 對象加上 record 與 current 屬性

export default {

  namespace: 'count',

  state: {
    record: 0,
    current: 0,
  },

  subscriptions: {
    setup({ dispatch, history }) {  // eslint-disable-lines
    },
  },

  effects: {
    *fetch({ payload }, { call, put }) {  // eslint-disable-line
      yield put({ type: 'save' });
    },
  },

  reducers: {
    save(state, action) {
      return { ...state, ...action.payload };
    },
  },

};

複製代碼

(3)接着咱們來到 routes/indexpage.js 頁面，經過的 mapStateToProps 引入相關的 state。

import React from "react";
import { connect } from "dva";
import styles from "./IndexPage.css";

class IndexPage extends React.Component {
  render() {
    const { dispatch, count } = this.props;

    return (
      <div className={styles.normal}>
        <div className={styles.record}>Highest Record: {count.record}</div>
        {/* // 將count的record輸出 */}
        <div className={styles.current}>{count.current}</div>
        <div className={styles.button}>
          <button
            onClick={() => {
            }}
          >
            +
          </button>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { count: state.count };
} // 獲取state

export default connect(mapStateToProps)(IndexPage);
複製代碼

(4)這裏須要說明下關於 React依賴注入說明（mapStateToProps/mapDispatchToProps）

將須要的state的節點注入到與此視圖數據相關的組件上

function mapStateToProps(state, ownProps) {
    return {
            loading:state.getIn(['projectPre', 'projectMgr', 'loading']),
            data:state.getIn(['APP', 'data']),
      ...
    }
    // loading、data都是來自對應的reduce
}
複製代碼

將須要綁定的響應事件注入到組件上

function mapDispatchToProps(dispatch){
    return {
        ...bindActionCreators(action, dispatch)
    }
}
// mapDispatchToProps()函數的bindActionCreators、action須要引入
    // import * as action from '../action';
    // import { bindActionCreators } from 'redux';
------------------------------------
------------------------------------
// 多個action 引入
import * as action from '../action';
import * as action2 from '../../../inde/action';
function mapDispatchToProps(dispatch){
    return {
        ...bindActionCreators(action, dispatch)
        ...bindActionCreators(action2, dispatch)
    }
}

------------------------------------
------------------------------------
// 引入一個action裏面的多個方法
import { activeOrAbandonedApproval, showSeller, getAddOrderDiscounts } from '../orderInfo/action'
function mapDispatchToProps(dispatch) {
  return {
    ...bindActionCreators({ activeOrAbandonedApproval, showSeller, getAddOrderDiscounts }, dispatch)
  }
}
複製代碼

(5)經過+發送 action，經過 reducer 改變相應的 state

export default {
  ...
  reducers: {
    add1(state) {
      const newCurrent = state.current + 1;
      return { ...state,
        record: newCurrent > state.record ? newCurrent : state.record,
        current: newCurrent,
      };
    },
    minus(state) {
      return { ...state, current: state.current - 1 };
    },
  },
};
複製代碼

(6)首先咱們在 models/example.js，寫相應的 reducer。

export default {
  namespace: "count",

  state: {
    record: 0,
    current: 0
  },

  subscriptions: {
    setup({ dispatch, history }) {
      // eslint-disable-lines
    }
  },

  effects: {
    *fetch({ payload }, { call, put }) {
      // eslint-disable-line
      yield put({ type: "save" });
    }
  },

  reducers: {
    add(state) {
      const newCurrent = state.current + 1;
      return {
        ...state,
        record: newCurrent > state.record ? newCurrent : state.record,
        current: newCurrent
      };
    },
    minus(state) {
      return { ...state, current: state.current - 1 };
    }
  }
};
複製代碼

(7)在頁面的模板 routes/IndexPage.js 中 + 號點擊的時候，dispatch 一個 action

import React from "react";
import { connect } from "dva";
import styles from "./IndexPage.css";

class IndexPage extends React.Component {
  componentDidMount() {
    console.log(this.props);
  }
  render() {
    const { dispatch, count } = this.props;

    return (
      <div className={styles.normal}>
        <div className={styles.record}>Highest Record: {count.record}</div>
        {/* // 將count的record輸出 */}
        <div className={styles.current}>{count.current}</div>
        <div className={styles.button}>
          <button
            onClick={() => {
              dispatch({ type: "count/add" });
            }}
          >
            +
          </button>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { count: state.count };
} // 獲取state

export default connect(mapStateToProps)(IndexPage);
複製代碼

效果以下：

5.接下來咱們來使用 effect 模擬一個數據接口請求，返回以後，經過 yield put() 改變相應的state

(1)首先咱們替換相應的 models/example.js 的 effect

effects: {
    *add(action, { call, put }) {
      yield call(delay, 1000);
      yield put({ type: 'minus' });
    },
},
複製代碼

(2)這裏的 delay，寫的一個延時的函數，咱們在 utils 裏面編寫一個 utils.js ，通常請求接口的函數都會寫在 servers文件夾中。

export function delay(timeout) {
  return new Promise((resolve) => {
    setTimeout(resolve, timeout);
  });
}
複製代碼

(3)接着在 models/example.js 導入這個 utils.js

import { delay } from '../utils/utils';
複製代碼

6.訂閱訂閱鍵盤事件，使用 subscriptions，當用戶按住command+up 時候觸發添加數字的 action

(1)你須要安裝 keymaster 這個依賴

npm install keymaster --save
複製代碼

(2)在models/example.js中做以下修改，這裏windows中的up就是鍵盤的↑.

import key from 'keymaster';
...
app.model({
  namespace: 'count',
+  subscriptions: {
+    keyboardWatcher({ dispatch }) {
+      key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) });
+    },
+  },
});
複製代碼

7.例子中咱們看到當咱們不斷點擊+按鈕以後，咱們會看到current會不斷加一，可是1s事後，他會自動減到零。那麼咱們如何修改呢？

(1)咱們應該在effect中發送一個關於添加的action，可是咱們在effect中不能直接這麼寫

effects: {
    *add(action, { call, put }) {
      yield put({ type: 'add' });
      yield call(delay, 1000);
      yield put({ type: 'minus' });
    },
  },
複製代碼

由於若是這樣的話，effect與reducers中的add方法重合了，這裏會陷入一個死循環，由於當組件發送一個dispatch的時候，model會首先去找effect裏面的方法，當又找到add的時候，就又會去請求effect裏面的方法。

(2)應該更改reducers裏面的方法，使它不與effect的方法同樣，將reducers中的add改成add1.

reducers: {
    add1(state) {
      const newCurrent = state.current + 1;
      return { ...state,
        record: newCurrent > state.record ? newCurrent : state.record,
        current: newCurrent,
      };
    },
    minus(state) {
      return { ...state, current: state.current - 1};
    },
  },
  effects: {
    *add(action, { call, put }) {
      yield put({ type: 'add1' });
      yield call(delay, 1000);
      yield put({ type: 'minus' });
    },
  },
複製代碼

結語

關於dva框架的model總結

1.state

這裏的state 跟以前用 state 的概念是同樣的，只不過她的優先級比初始化的低，但在項目中的 state 基本都是在這裏定義的。

2.namespace

model 的命名空間，同時也是他在全局 state 上的屬性，只能用字符串，咱們發送在發送 action 到相應的 reducer 時，就會須要用到namespace 。

3.Reducer

以key/value 格式定義 reducer，用於處理同步操做，惟一能夠修改 state 的地方。由 action 觸發。其實一個純函數。

4.Effect

用於處理異步操做和業務邏輯，不直接修改 state，簡單的來講，就是獲取從服務端獲取數據，而且發起一個 action 交給 reducer的地方。

其中它用到了redux-saga，裏面有幾個經常使用的函數。

*add(action, { call, put }) {
    yield call(delay, 1000);
    yield put({ type: 'minus' });
},
複製代碼

5.Effects

(1) put,用於觸發action

yield put({ type: '',payload:'' });
複製代碼

(2)call 用於異步邏輯處理，支持Promise

const result= yield call(fetch,'');
複製代碼

(3)select 用於state獲取數據

const todo = yield select(state=>state.todo);
複製代碼

6.Subscription

subscription 是訂閱，用於訂閱一個數據源，而後根據須要 dispatch 相應的 action。在 app.start() 時被執行，數據源能夠是當前的時間、當前頁面的url、服務器的 websocket 鏈接、history路由變化等等。