原文地址在我的博客, 轉(zhuǎn)載請(qǐng)注明出處，謝謝辟拷！
前言
使用React技術(shù)棧管理大型復(fù)雜的應(yīng)用往往要使用Redux來管理應(yīng)用的狀態(tài)撞羽，然而隨著深度使用，Redux也暴露出了一些問題梧兼。如編寫頁面配套（action放吩、reducer）過于繁瑣、復(fù)雜羽杰，組件之間耦合較深渡紫、不夠扁平化、調(diào)用action creator發(fā)起動(dòng)作破壞action純潔性且必須層層傳遞等考赛。這些缺點(diǎn)迫使使用Redux的人開始探索好的架構(gòu)方式惕澎，解決或減輕使用Redux的問題。業(yè)界標(biāo)桿阿里為此推出了dva 和 Mirror兩種改良Redux的架構(gòu)方案颜骤，不過這兩者類似唧喉，本文就介紹一下dva。
概述
本文介紹了dva的產(chǎn)生背景忍抽，dva是什么八孝，用來做什么，解決了什么問題鸠项，使用場(chǎng)景干跛，原理，實(shí)踐以及我的使用心得祟绊。
背景
Redux 文檔中介紹楼入，我們需要編寫頁面的action creator來提交，需要寫reducer來更新state牧抽，最好對(duì)action 和 reducer 做頁面為單位的分割嘉熊，利用redux 給的API 構(gòu)建容器組件包裹父組件來connect store拿到數(shù)據(jù)，然后再向下傳遞給functional component 來渲染扬舒，整個(gè)過程就實(shí)現(xiàn)了單向數(shù)據(jù)流阐肤。當(dāng)應(yīng)用復(fù)雜起來，一般的做法是配合react-router 做頁面分割讲坎，光這個(gè)分割泽腮，你就得 做redux store 的創(chuàng)建，中間件的配置衣赶，路由的初始化，Provider 的 store 的綁定厚满，saga 的初始化府瞄，還要處理 reducer, component, saga之間的聯(lián)系...這個(gè)沒辦法，Redux就這么復(fù)雜；但是每個(gè)頁面下要有自己對(duì)應(yīng)的action遵馆、reducer鲸郊，一般還會(huì)有saga，這樣的話每個(gè)頁面下都要有四五個(gè)文件目錄（還有components货邓、containers）秆撮，每個(gè)文件目錄下估計(jì)還要有不同功能的action、reducer换况、saga...如果這能忍的話职辨，你在組件里發(fā)起action有兩個(gè)方案，第一：調(diào)用經(jīng)過層層傳遞的action creator 或者 sagas戈二，第二舒裤，讓saga監(jiān)聽action，再在組件里直接dispatch相應(yīng)action類型就行了觉吭，不用層層傳遞腾供，但是得提前 fork -> watcher -> worker.....真的是非常復(fù)雜，容易出錯(cuò)鲜滩。
dva 是什么
dva名字取自游戲守望先鋒里的一個(gè)駕駛機(jī)甲的韓國(guó)英雄叫dva伴鳖，大概含義就是Redux的機(jī)甲吧...
確實(shí),
dva 是基于現(xiàn)有應(yīng)用架構(gòu) (redux + react-router + redux-saga 等)的一層輕量封裝，沒有引入任何新概念徙硅，全部代碼不到 100 行榜聂。( Inspired by elm and choo. )
dva 幫你自動(dòng)化了Redux 架構(gòu)一些繁瑣的步驟，比如上面所說的redux store 的創(chuàng)建闷游，中間件的配置峻汉，路由的初始化等等,沒有什么魔法，只是幫你做了redux + react-router + redux-saga 架構(gòu)的那些惡心脐往、繁瑣休吠、容易出錯(cuò)的步驟，只需寫幾行代碼就可以實(shí)現(xiàn)上述步驟业簿，它解決了背景所說的所有缺點(diǎn)瘤礁。dva介紹
此外，dva重要的特性就是把一個(gè)路由下的state梅尤、reducer柜思、sagas 寫到一塊了，清晰明了
app.model({
namespace: 'products', //分割的路由巷燥，對(duì)應(yīng)要combine到root Reducer里的名字赡盘，這里就是state.products
state: { //這個(gè)路由下初始state
list: [],
loading: false,
},
subscriptions: [ //用來監(jiān)聽路徑變化，這里就是當(dāng)路由為products時(shí)dispatch一個(gè)獲取數(shù)據(jù)的請(qǐng)求
setup({ dispatch, history }) {
return history.listen(({ pathname }) => {
if (pathname === 'products') {
//dispatch({ type: 'getUserInfo', payload: {} });
}
});
},
},
],
effects: { //saga里的effects缰揪，里面的各種處理異步操作的saga
['products/query']: function*() {
yield call(delay(800));
yield put({
type: 'products/query/success',
payload: ['ant-tool', 'roof'],
});
},
},
reducers: { // reducers
['products/query'](state) {
return { ...state, loading: true, };
},
['products/query/success'](state, { payload }) {
return { ...state, loading: false, list: payload };
},
},
});
dva的思想
dva就是把之前Redux每個(gè)路由下的state陨享、reducer、sagas寫到一塊去了，做了寫到一塊去也能做到以前redux能做的事抛姑，并且讓思路變得很清晰 ：
每個(gè)路由下都有一個(gè)model赞厕，這個(gè)model掌管這個(gè)路由的所有狀態(tài)（action、state定硝、reducer皿桑、sagas），組件想改變狀態(tài)dispatch type名字就行了蔬啡。
實(shí)踐
搞懂框架的腳手架是快速上手這個(gè)框架的一個(gè)好方法诲侮，下面是dva-cli
項(xiàng)目架構(gòu)
.
├── src
├── assets # 圖片、logo
├── components # 公用UI組件
├── index.css # CSS for entry file
├── index.html # HTML for entry file
├── index.js # 入口文件
├── models # 這里存放的就是上面說的dva的model星爪，最好每個(gè)路由一個(gè)model
├── router.js # 路由文件
├── routes # 路由組件浆西，跟Redux相同
├── services # 每個(gè)頁面的services，通常是獲取后端數(shù)據(jù)的接口定義
└── utils # 存放一些工具
└── request.js # 這里封裝一個(gè)用來與后端通信的接口
├── .editorconfig #
├── .eslintrc # Eslint config
├── .gitignore #
├── .roadhogrc # Roadhog config
└── package.json #
按照dva的架構(gòu)顽腾，每個(gè)路由下都有個(gè)model層近零，在model定義好這個(gè)路由的initialstate、reducers抄肖、sagas久信、subscriptions；然后connect組件漓摩，當(dāng)在組件里發(fā)起action時(shí)裙士，直接dispatch就行了，dva會(huì)幫你自動(dòng)調(diào)用sagas/reducers管毙。當(dāng)發(fā)起同步action時(shí)腿椎，type寫成'(namespace)/(reducer)'dva就幫你調(diào)用對(duì)應(yīng)名字的reducer直接更新state，當(dāng)發(fā)起異步action夭咬，type就寫成'(namespace)/(saga)',dva就幫你調(diào)用對(duì)應(yīng)名字的saga異步更新state啃炸，非常方便：
在組件里：
...
const { dispatch } = this.props
dispatch({
type: 'namespace/sagas', //這里的type規(guī)范為model里面定義的namespace和effects下面定義的sagas或者
payload: { // reducers,這樣就能實(shí)現(xiàn)自動(dòng)調(diào)用這些函數(shù)
...
}
})
注意，dispatch用來更新state某個(gè)數(shù)據(jù)后卓舵，下一步從state拿到的這個(gè)數(shù)據(jù)并不是更新后的：
...
const { dispatch, data } = this.props
dispatch({
type: 'namespace/sagas', //這里的type規(guī)范為model里面定義的namespace和effects下面定義的sagas或者
payload: { // reducers,這樣就能實(shí)現(xiàn)自動(dòng)調(diào)用這些函數(shù)
data //這里想更新data
}
})
console.log(data) // 仍然是之前的數(shù)據(jù)南用，并不是dispatch更新后的數(shù)據(jù)
// 因?yàn)閐ispatch是異步的，如同React的setState后面打印state
此外掏湾，由于不用層層傳遞action creator裹虫，mapDispatchToProps就不用再寫了，組件之間的耦合度也降低了融击，或者說根本沒有關(guān)系了筑公，dva使組件之間的關(guān)系變得更加扁平化,沒有什么父子、兄弟關(guān)系尊浪，這樣組件就具有很高的可重用性匣屡。所有需要在組件里通信的數(shù)據(jù)都要放在state中涩拙，然后connect組件，只拿到組件關(guān)心的數(shù)據(jù)耸采，就像這樣：
class App extends Component {
...
}
function mapStateToProps(state) {
const {
data
} = state.user; // user 對(duì)應(yīng)namespace
const loading = state.loading.effects['user/fetch'];
return {
data,
loading
};
}
export default connect(mapStateToProps)(User);
這樣寫，除了具有很高的重用性工育，也避免了父組件更新虾宇，子組件也會(huì)隨之更新的缺點(diǎn)了！只要這個(gè)組件關(guān)心的數(shù)據(jù)沒變如绸，它就不會(huì)重新渲染嘱朽，省掉了重寫shouldComponentUpdate來提高性能，邏輯也變得清晰怔接、簡(jiǎn)單起來搪泳！
另外，model下有個(gè)subscriptions用于訂閱一個(gè)數(shù)據(jù)源扼脐，可以在這里面監(jiān)聽路由變化岸军，比如當(dāng)路由跳轉(zhuǎn)到本頁面時(shí)，發(fā)起請(qǐng)求來獲取初始數(shù)據(jù)：
subscriptions: {
setup: ({ history, dispatch }) => history.listen(({ pathname, query }) => {
if (pathname === '/user') {
dispatch({
type: 'fetch',
payload: {
query
}
});
}
}),
},
};
問題
使用沒多久瓦侮，了解較淺艰赞，暫時(shí)沒發(fā)現(xiàn)什么問題
總結(jié)
dva框架封裝了Redux 架構(gòu)一些繁瑣、復(fù)雜的步驟和常用庫肚吏，使用dva方妖，不會(huì)構(gòu)建Redux架構(gòu)也可以，dva幫你做好了;
dva 降低了組件之間的耦合度罚攀，沒有父子党觅、兄弟組件的關(guān)系，提高了組件可重用性以及渲染性能斋泄，使思路變得簡(jiǎn)單清晰杯瞻；
dva架構(gòu)思路清晰，代碼書寫方式固定是己，有利于團(tuán)隊(duì)合作又兵，但可擴(kuò)展性不強(qiáng)
