十分鐘dva入門

寫這篇文章主要是將本身學會的知識再表達出來，本身雖然理解了這塊知識，可是是否能用本身的話再講出來，那又是另一種境地，只有能本身講述後纔算完成轉化。 傳送門

dva是什麼

dva 是阿里體驗技術部開發的 React 應用框架，命名是根據守望先鋒中的任務D.va而來。 主要用於解決組件之間的通行問題， 在之前react項目中解決數據流問題會引入redux，又因爲redux沒有異步操做，因此須要引入redux-saga或redux-thunk,這樣的缺點就是 引入多個庫，導致項目結構複雜。而如今：

dva = React-Router + Redux + Redux-saga

將上面三個 React 工具庫包裝在一塊兒，簡化了 API，讓開發 React 應用更加方便和快捷。

• 瞭解dva以前能夠先去了解redux-saga.

dva的最簡結構：

import dva from 'dva';
const App = () => <div>Hello dva</div>;

// 建立應用
const app = dva();
app.model(model)
// 註冊視圖
app.router(() => <App />);
// 啓動應用
app.start('#root');
複製代碼

數據流圖

核心概念

• State：一個對象，保存整個應用狀態
• View：React 組件構成的視圖層
• Action：一個對象，描述事件
• connect 方法：一個函數，綁定 State 到 View
• dispatch 方法：一個函數，發送 Action 到 State

state和view

state是用於數據存儲保存全局狀態。view是react組件構成的UI層，當state變化時會觸發ui層視圖的變化。

Action和dispatch

action是用於描述一個事件的一個對象

{
    type: 'submit-form-data',
    payload: formData
}

複製代碼

dispatch則用來發送Action到State

connect

connect 是一個函數，綁定 State 到 View，connect 方法返回的也是一個 React 組件，一般稱爲容器組件，是用於生成State到Prop的映射

// 第一種寫法這裏使用來修飾器@
@connect((state) => {
  return {
    dept: state.dept,
    version: state.version,
  };
})

// 第二種寫法
connect(({ state}) => ({state}))(App);

複製代碼

Model

dva中的model是全部的應用邏輯都定義在裏面

model的栗子🌰：

export default {
    namespace: 'modelName',
    state: {
      num: 0
    }，
    subscriptions: {
      setup({dispatch,history}){
        return history.listen(({pathname, query})=>{
          dosomething....  
        })
      }
    }
    effects: {
        *addAfter1Second({payload}, { call, put, select }) {
          yield call(delay, 1000);
          yield put({ type: 'add' , payload: 10});
          const num =  yield select(state => state.modelNmae.num);
          console.log(num)
      },
    },
    reducers: {
      add(state, action) { 
        return{
          ...state,
          num: action.payload
        }
      },
  },
}

複製代碼

model對象的屬性由namespace,state, effect,reducers,subscriptions組成。

namespace和state

namespace當前 Model 的名稱。整個應用的 State，由多個小的 Model 的 State 以 namespace 爲 key 合成,當在ui層觸發變化時，能夠利用namespace來區分觸發那個model的方法。從而改變state.

dispatch({
  type: 'modelname/add',
  payload: 10
})
複製代碼

數據保存在state，直接決定了視圖層的輸出.

effects和reducers

effects和reducers都是action的處理器，不一樣的是reducers處理的是同步的action,effects處理的是異步的action,effects是基於 redux-saga實現，effect是一個Generator函數，內部使用yield關鍵字，標識每一步的操做。effect提供了供內部使用的三個方法。

• call: 執行異步函數，通常用於請求數據
• put: 至關與dispatch，發出一個action,觸法一個同步的action
• select: 能夠用於獲取全局的狀態state

subscriptions

subscriptions通常用於監聽路由變化，當知足某些要求時，能夠觸發一些事件