1. 程式人生 > >dva介紹--Dva概念(二)

dva介紹--Dva概念(二)

1.資料流向

資料的改變發生通常是通過使用者互動行為或者瀏覽器行為(如路由跳轉等)觸發的。 通過 dispatch 發起一個 action, 如果是同步行為會直接通過 Reducers 改變 State , 如果是非同步行為(副作用)會先觸發 Effects 然後流向 Reducers 最終改變 State

2.Models

2.1 State State 表示 Model 的狀態資料,通常表現為一個 javascript 物件(當然它可以是任何值) 操作的時候每次都要當作不可變資料(immutable data)來對待,保證每次都是全新物件,沒有引用關係,這樣才能保證 State 的獨立性,便於測試和追蹤變化。

2.2 Action Action 是一個普通 javascript 物件,它是改變 State 的唯一途徑。 action 必須帶有 type 屬性指明具體的行為,其它欄位可以自定義,在元件通過 props 傳入的

2.3 dispatch 函式 dispatch是一個用於觸發 action 的函式

dispatch({
  type: 'user/add', // 如果在 model 外呼叫,需要新增 namespace
  payload: {}, // 需要傳遞的資訊
});

2.4 Reducer Reducer 則是描述如何改變資料的 通過 actions 中傳入的值,與當前 reducers 中的值進行運算獲得新的值(也就是新的 state) 要注意的是 Reducer 必須是純函式

2.5 Effect Effect 被稱為副作用,在我們的應用中,最常見的就是非同步操作 dva 為了控制副作用的操作,底層引入了redux-sagas做非同步流程控制,由於採用了generator的相關概念,所以將非同步轉成同步寫法,從而將effects轉為純函式

2.6 Subscription ubscription 語義是訂閱,用於訂閱一個數據源,然後根據條件 dispatch 需要的 action 資料來源可以是當前的時間、伺服器的 websocket 連線、keyboard 輸入、geolocation 變化、history 路由變化等等。

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

3.Router

dva 例項提供了 router 方法來控制路由,使用的是react-router

import { Router, Route } from 'dva/router';
app.router(({history}) =>
  <Router history={history}>
    <Route path="/" component={HomePage} />
  </Router>
);

4.Route Components

所以在 dva 中,通常需要 connect Model的元件都是 Route Components,組織在/routes/目錄下,而/components/目錄下則是純元件(Presentational Components)。