dva框架的核心概念、model中的常用屬性

一、 dva的核心概念

• State:一個對象，保存整個應用狀態

• View：React組件構成的視圖層

• Action：一個對象，用來描述 UI 層事件

• connect方法：一個函數，綁定State到View

• dispatch方法：一個函數，發送Action到State

State 和 View

State 是儲存數據的地方，收到 Action 以後，會更新數據。

View 就是 React 組件構成的 UI 層，從 State 取數據後，渲染成 HTML 代碼。只要 State 有變化，View 就會自動更新。

Action 是用來描述 UI 層事件的一個對象。

{
type: ‘click-submit-button’,
payload: this.form.data
}

connect 方法 是一個函數，綁定 State 到 View。

import { connect } from 'dva';

function mapStateToProps(state) {
  return { todos: state.todos };
}
connect(mapStateToProps)(App);

connect 方法返回的也是一個 React 組件，通常稱爲容器組件。因爲它是原始 UI 組件的容器，即在外面包了一層 State。

connect 方法傳入的第一個參數是 mapStateToProps 函數，mapStateToProps 函數會返回一個對象，用於建立 State 到 Props 的映射關係。

dispatch 方法

dispatch 是一個函數方法，用來將 Action 發送給 State。

dispatch({
type: ‘click-submit-button’,
payload: this.form.data
})
dispatch 方法從哪裏來？被 connect 的 Component 會自動在 props 中擁有 dispatch 方法。

Reducer函數

Reducer 是 Action 處理器，用來處理同步操作，可以看做是 state 的計算器。它的作用是根據 Action，從上一個 State 算出當前 State。

• 該函數把一個集合歸併成一個單值。

type Reducer<S, A> = (state: S, action: A) => S

寫法：

reducers:{
'delete'(state, { payload: id }) {
      return state.filter(item => item.id !== id);
    }
}
//delete會被解析爲字符串=>
reducers:{
    delete:function(state, { payload: id }){
        return state.filter(item => item.id !== id);
    }
}

Effects

Action 處理器，處理異步動作，基於 Redux-saga 實現。Effect 指的是副作用。根據函數式編程，計算以外的操作都屬於 Effect，典型的就是 I/O 操作、數據庫讀寫。
Effect 是一個 Generator 函數，內部使用 yield 關鍵字，標識每一步的操作（不管是異步或同步）。

function *addAfter1Second(action, { put, call }) {
  yield call(delay, 1000);
  yield put({ type: 'add' });
}

dva 提供多個 effect 函數內部的處理函數，比較常用的是 call 和 put。

call：執行異步函數
 put：發出一個 Action，類似於 dispatch

二、Model中的常用屬性：

state：
namespace：
reducers:
effects:
subscriptions: