DvaJS: React and redux based, lightweight and elm-style framework.
實例項目源碼:https://github.com/AK-47-D/react-redux-demo
快速上手
#安裝 dva-cli
通過 npm 安裝 dva-cli 並確保版本是 0.9.1
或以上。
$ npm install dva-cli -g $ dva -v dva-cli version 0.9.1
#創建新應用
安裝完 dva-cli 之後,就可以在命令行裏訪問到 dva
命令(不能訪問?)。現在,你可以通過 dva new
創建新應用。
$ dva new dva-quickstart
這會創建 dva-quickstart
目錄,包含項目初始化目錄和文件,並提供開發服務器、構建腳本、數據 mock 服務、代理服務器等功能。
然後我們 cd
進入 dva-quickstart
目錄,並啓動開發服務器:
$ cd dva-quickstart $ npm start
幾秒鐘後,你會看到以下輸出:
Compiled successfully! The app is running at: http://localhost:8000/ Note that the development build is not optimized. To create a production build, use npm run build.
在瀏覽器裏打開 http://localhost:8000 ,你會看到 dva 的歡迎界面。
#使用 antd
通過 npm 安裝 antd
和 babel-plugin-import
。babel-plugin-import
是用來按需加載 antd 的腳本和樣式的,詳見 repo 。
$ npm install antd babel-plugin-import --save (國內鏡像:tnpm)
編輯 .webpackrc
,使 babel-plugin-import
插件生效。
{ + "extraBabelPlugins": [ + ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] + ] }
注:dva-cli 基於 roadhog 實現 build 和 dev,更多
.webpackrc
的配置詳見 roadhog#配置
#定義路由
我們要寫個應用來先顯示產品列表。首先第一步是創建路由,路由可以想象成是組成應用的不同頁面。
新建 route component routes/Products.js
,內容如下:
import React from 'react'; const Products = (props) => ( <h2>List of Products</h2> ); export default Products;
添加路由信息到路由表,編輯 router.js
:
+ import Products from './routes/Products'; ... + <Route path="/products" exact component={Products} />
然後在瀏覽器裏打開 http://localhost:8000/#/products ,你應該能看到前面定義的 <h2>
標籤。
#編寫 UI Component
隨着應用的發展,你會需要在多個頁面分享 UI 元素 (或在一個頁面使用多次),在 dva 裏你可以把這部分抽成 component 。
我們來編寫一個 ProductList
component,這樣就能在不同的地方顯示產品列表了。
新建 components/ProductList.js
文件:
import React from 'react' import PropTypes from 'prop-types' import {Button, Popconfirm, Table} from 'antd' /** * React Component 有 3 種定義方式,分別是: * React.createClass, class 和 Stateless Functional Component。 * * 推薦最後一種,保持簡潔和無狀態。 * 這是函數,不是 Object,沒有 this 作用域,是 pure function。 * @param onDelFn * @param products * @returns {XML} * @constructor */ const ProductList = ({onDelFn, products}) => { const columns = [ // 表格的列 { title: 'ID', dataIndex: 'id' }, { title: 'Name', dataIndex: 'name' }, { title: 'Actions', render: (text, record) => { return ( <Popconfirm title={'Delete?'} onConfirm={() => { onDelFn(record.id) }}> <Button>Delete</Button> </Popconfirm> ) } } ] return (<Table dataSource={products} columns={columns}/>) } ProductList.propTypes = { onDelFn: PropTypes.func.isRequired, products: PropTypes.array.isRequired } // 記得導出哦! export default ProductList;
#定義 Model
完成 UI 後,現在開始處理數據和邏輯。
dva 通過 model 的概念把一個領域的模型管理起來,包含同步更新 state 的 reducers,處理異步邏輯的 effects,訂閱數據源的 subscriptions 。
新建 model models/products.js
:
export default { namespace: 'products', state: [], reducers: { 'delete'(state, { payload: id }) { return state.filter(item => item.id !== id); }, }, };
這個 model 裏:
-
namespace
表示在全局 state 上的 key -
state
是初始值,在這裏是空數組 -
reducers
等同於 redux 裏的 reducer,接收 action,同步更新 state
然後別忘記在 index.js
裏載入他:
// 3\. Model + app.model(require('./models/products').default);
#connect 起來
到這裏,我們已經單獨完成了 model 和 component,那麼他們如何串聯起來呢?
dva 提供了 connect 方法。如果你熟悉 redux,這個 connect 就是 react-redux 的 connect 。
編輯 routes/Products.js
,替換爲以下內容:
import React from 'react'; import { connect } from 'dva'; import ProductList from '../components/ProductList'; const Products = ({ dispatch, products }) => { function handleDelete(id) { dispatch({ type: 'products/delete', payload: id, }); } return ( <div> <h2>List of Products</h2> <ProductList onDelete={handleDelete} products={products} /> </div> ); }; // export default Products; export default connect(({ products }) => ({ products, }))(Products);
最後,我們還需要一些初始數據讓這個應用 run 起來。編輯 index.js
:
- const app = dva(); + const app = dva({ + initialState: { + products: [ + { name: 'dva', id: 1 }, + { name: 'antd', id: 2 }, + ], + }, + });
刷新瀏覽器,應該能看到以下效果:
image
#構建應用
完成開發並且在開發環境驗證之後,就需要部署給我們的用戶了。先執行下面的命令:
$ npm run build
幾秒後,輸出應該如下:
> @ build /private/tmp/myapp > roadhog build Creating an optimized production build... Compiled successfully. File sizes after gzip: 82.98 KB dist/index.js 270 B dist/index.css
build
命令會打包所有的資源,包含 JavaScript, CSS, web fonts, images, html 等。然後你可以在 dist/
目錄下找到這些文件。
Dva 概念
#數據流向
數據的改變發生通常是通過用戶交互行爲或者瀏覽器行爲(如路由跳轉等)觸發的,當此類行爲會改變數據的時候可以通過 dispatch
發起一個 action,如果是同步行爲會直接通過 Reducers
改變 State
,如果是異步行爲(副作用)會先觸發 Effects
然後流向 Reducers
最終改變 State
,所以在 dva 中,數據流向非常清晰簡明,並且思路基本跟開源社區保持一致(也是來自於開源社區)。
image
#Models
#State
type State = any
State 表示 Model 的狀態數據,通常表現爲一個 javascript 對象(當然它可以是任何值);操作的時候每次都要當作不可變數據(immutable data)來對待,保證每次都是全新對象,沒有引用關係,這樣才能保證 State 的獨立性,便於測試和追蹤變化。
在 dva 中你可以通過 dva 的實例屬性 _store
看到頂部的 state 數據,但是通常你很少會用到:
const app = dva(); console.log(app._store); // 頂部的 state 數據
#Action
type AsyncAction = any
Action 是一個普通 javascript 對象,它是改變 State 的唯一途徑。無論是從 UI 事件、網絡回調,還是 WebSocket 等數據源所獲得的數據,最終都會通過 dispatch 函數調用一個 action,從而改變對應的數據。action 必須帶有 type
屬性指明具體的行爲,其它字段可以自定義,如果要發起一個 action 需要使用 dispatch
函數;需要注意的是 dispatch
是在組件 connect Models以後,通過 props 傳入的。
dispatch({ type: 'add', });
#dispatch 函數
type dispatch = (a: Action) => Action
dispatching function 是一個用於觸發 action 的函數,action 是改變 State 的唯一途徑,但是它只描述了一個行爲,而 dipatch 可以看作是觸發這個行爲的方式,而 Reducer 則是描述如何改變數據的。
在 dva 中,connect Model 的組件通過 props 可以訪問到 dispatch,可以調用 Model 中的 Reducer 或者 Effects,常見的形式如:
dispatch({ type: 'user/add', // 如果在 model 外調用,需要添加 namespace payload: {}, // 需要傳遞的信息 });
#Reducer
type Reducer<S, A> = (state: S, action: A) => S
Reducer(也稱爲 reducing function)函數接受兩個參數:之前已經累積運算的結果和當前要被累積的值,返回的是一個新的累積結果。該函數把一個集合歸併成一個單值。
Reducer 的概念來自於是函數式編程,很多語言中都有 reduce API。如在 javascript 中:
[{x:1},{y:2},{z:3}].reduce(function(prev, next){ return Object.assign(prev, next); }) //return {x:1, y:2, z:3}
在 dva 中,reducers 聚合積累的結果是當前 model 的 state 對象。通過 actions 中傳入的值,與當前 reducers 中的值進行運算獲得新的值(也就是新的 state)。需要注意的是 Reducer 必須是純函數,所以同樣的輸入必然得到同樣的輸出,它們不應該產生任何副作用。並且,每一次的計算都應該使用immutable data,這種特性簡單理解就是每次操作都是返回一個全新的數據(獨立,純淨),所以熱重載和時間旅行這些功能才能夠使用。
#Effect
Effect 被稱爲副作用,在我們的應用中,最常見的就是異步操作。它來自於函數編程的概念,之所以叫副作用是因爲它使得我們的函數變得不純,同樣的輸入不一定獲得同樣的輸出。
dva 爲了控制副作用的操作,底層引入了redux-sagas做異步流程控制,由於採用了generator的相關概念,所以將異步轉成同步寫法,從而將effects轉爲純函數。至於爲什麼我們這麼糾結於 純函數,如果你想了解更多可以閱讀Mostly adequate guide to FP,或者它的中文譯本JS函數式編程指南。
#Subscription
Subscriptions 是一種從 源 獲取數據的方法,它來自於 elm。
Subscription 語義是訂閱,用於訂閱一個數據源,然後根據條件 dispatch 需要的 action。數據源可以是當前的時間、服務器的 websocket 連接、keyboard 輸入、geolocation 變化、history 路由變化等等。
import key from 'keymaster'; ... app.model({ namespace: 'count', subscriptions: { keyEvent({dispatch}) { key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) }); }, } });
#Router
這裏的路由通常指的是前端路由,由於我們的應用現在通常是單頁應用,所以需要前端代碼來控制路由邏輯,通過瀏覽器提供的 History API 可以監聽瀏覽器url的變化,從而控制路由相關操作。
dva 實例提供了 router 方法來控制路由,使用的是react-router。
import { Router, Route } from 'dva/router'; app.router(({history}) => <Router history={history}> <Route path="/" component={HomePage} /> </Router> );
#Route Components
在組件設計方法中,我們提到過 Container Components,在 dva 中我們通常將其約束爲 Route Components,因爲在 dva 中我們通常以頁面維度來設計 Container Components。
所以在 dva 中,通常需要 connect Model的組件都是 Route Components,組織在/routes/
目錄下,而/components/
目錄下則是純組件(Presentational Components)。
#參考
#例子和腳手架
#官方
- Count: 簡單計數器
- User Dashboard: 用戶管理
- AntDesign Pro:(Demo),開箱即用的中臺前端/設計解決方案
- HackerNews: (Demo),HackerNews Clone
- antd-admin: (Demo),基於 antd 和 dva 的後臺管理應用
- github-stars: (Demo),Github Star 管理應用
#社區
- Account System: 小型庫存管理系統
- react-native-dva-starter: 集成了 dva 和 react-navigation 典型應用場景的 React Native 實例
Dva 圖解
作者:至正 原文鏈接:https://yuque.com/flying.ni/the-tower/tvzasn
#示例背景
最常見的 Web 類示例之一: TodoList = Todo list + Add todo button
#圖解一: React 表示法
圖片.png | left | 747x518
按照 React 官方指導意見, 如果多個 Component 之間要發生交互, 那麼狀態(即: 數據)就維護在這些 Component 的最小公約父節點上, 也即是 <App/>
<TodoList/> <Todo/>
以及<AddTodoBtn/>
本身不維持任何 state, 完全由父節點<App/>
傳入 props 以決定其展現, 是一個純函數的存在形式, 即: Pure Component
#圖解二: Redux 表示法
React 只負責頁面渲染, 而不負責頁面邏輯, 頁面邏輯可以從中單獨抽取出來, 變成 store
圖片.png | left | 747x558
與圖一相比, 幾個明顯的改進點:
- 狀態及頁面邏輯從
<App/>
裏面抽取出來, 成爲獨立的 store, 頁面邏輯就是 reducer -
<TodoList/>
及<AddTodoBtn/>
都是 Pure Component, 通過 connect 方法可以很方便地給它倆加一層 wrapper 從而建立起與 store 的聯繫: 可以通過 dispatch 向 store 注入 action, 促使 store 的狀態進行變化, 同時又訂閱了 store 的狀態變化, 一旦狀態有變, 被 connect 的組件也隨之刷新 - 使用 dispatch 往 store 發送 action 的這個過程是可以被攔截的, 自然而然地就可以在這裏增加各種 Middleware, 實現各種自定義功能, eg: logging
這樣一來, 各個部分各司其職, 耦合度更低, 複用度更高, 擴展性更好
#圖解三: 加入 Saga
圖片.png | left | 747x504
上面說了, 可以使用 Middleware 攔截 action, 這樣一來異步的網絡操作也就很方便了, 做成一個 Middleware 就行了, 這裏使用 redux-saga 這個類庫, 舉個栗子:
- 點擊創建 Todo 的按鈕, 發起一個 type == addTodo 的 action
- saga 攔截這個 action, 發起 http 請求, 如果請求成功, 則繼續向 reducer 發一個 type == addTodoSucc 的 action, 提示創建成功, 反之則發送 type == addTodoFail 的 action 即可
#圖解四: Dva 表示法
圖片.png | left | 747x490
有了前面的三步鋪墊, Dva 的出現也就水到渠成了, 正如 Dva 官網所言, Dva 是基於 React + Redux + Saga 的最佳實踐沉澱, 做了 3 件很重要的事情, 大大提升了編碼體驗:
- 把 store 及 saga 統一爲一個 model 的概念, 寫在一個 js 文件裏面
- 增加了一個 Subscriptions, 用於收集其他來源的 action, eg: 鍵盤操作
- model 寫法很簡約, 類似於 DSL 或者 RoR, coding 快得飛起✈️
約定優於配置, 總是好的
?
app.model({ namespace: 'count', state: { record: 0, current: 0, }, 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}; }, }, effects: { *add(action, { call, put }) { yield call(delay, 1000); yield put({ type: 'minus' }); }, }, subscriptions: { keyboardWatcher({ dispatch }) { key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) }); }, }, });