在圖中，使用Redux管理React數(shù)據(jù)流的過(guò)程如圖所示裁着，Store作為唯一的state樹(shù)繁涂，管理所有組件的state。組件所有的行為通過(guò)Actions來(lái)觸發(fā)二驰，然后Action更新Store中的state,Store根據(jù)state的變化同步更新React視圖組件扔罪。
那么Store是如何和視圖綁定的呢？
在主入口文件index.js中桶雀，通過(guò)Provider標(biāo)簽把Store和視圖綁定：
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word;">
<Provider store={store}>
//項(xiàng)目代碼
</Provider>` </pre>
在項(xiàng)目中矿酵，Store是如何具體管理State呢唬复？實(shí)際上是通過(guò)Reducers根據(jù)不同的Action.type來(lái)更新不同的state，即（previousState,action） => newState全肮。最后利用Redux提供的函數(shù)combineReducers將所有的Reducer進(jìn)行合并盅抚，更新整個(gè)State樹(shù)。
在Redux項(xiàng)目中倔矾，利用Container容器組件作為橋梁妄均，將React組件和Redux管理的數(shù)據(jù)流聯(lián)系起來(lái)。Container通過(guò)connect函數(shù)將Redux的state和action轉(zhuǎn)化成展示組件即React組件所需的Props哪自。
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word;">`//將state.data綁定到相應(yīng)的React組件的Props的data
function mapStateToProps(state){
return {
data:state.data
}
}
//將actions的所有方法綁定到相應(yīng)的React組件的Props上
function mapDispatchToProps(dispatch){
return bindActionCreators(actions,dispatch)
}
//通過(guò)react-redux提供的connect方法將我們需要的state中的數(shù)據(jù)和actions中的方法綁定到相應(yīng)的React組件的Props上
export default connect(mapStateToProps,mapDispatchToProps)(reactComponent)` </pre>
通過(guò)上面的分析丰包，我們總結(jié)為一幅更詳細(xì)的圖示：
注冊(cè)Store：
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word;">`
//applyMiddleware可以包裝Store的dispatch,thunk的作用是使action創(chuàng)建函數(shù)可以返回一個(gè)function替代action對(duì)象
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore)
... ...
const store = createStoreWithMiddleware(reducer,initialState)` </pre>
這里可能有同學(xué)會(huì)有疑問(wèn)，React的state和Redux所說(shuō)的state是同一回事嗎壤巷？下面我們簡(jiǎn)要分析一下：
首先邑彪，React組件的state和props定義如下：
state-只表示一些臨時(shí)的、內(nèi)部的狀態(tài)數(shù)據(jù)胧华，例如窗口的打開(kāi)或關(guān)閉狀態(tài)寄症。
props-通常存儲(chǔ)一些方法，一些可能需要庫(kù)存的長(zhǎng)期數(shù)據(jù)和一些需要傳遞的共享數(shù)據(jù)矩动。
然后有巧，Redux和React基本上只有2種聯(lián)系：
要么React從Redux的state中讀取數(shù)據(jù)，要么React通過(guò)dispatch分發(fā)action到Redux,Redux的reducer來(lái)返回一個(gè)新的state悲没。
結(jié)論是Redux的state存放的是全局的長(zhǎng)期數(shù)據(jù)篮迎，也就是對(duì)應(yīng)的React組件的Props數(shù)據(jù)，而組件React的state應(yīng)該是臨時(shí)的內(nèi)部狀態(tài)數(shù)據(jù)示姿，所以這兩個(gè)state沒(méi)有半毛錢關(guān)系甜橱。
下面我們總結(jié)一下Redux的三大原則和數(shù)據(jù)流的管理：
Redux三大原則：
1、單一數(shù)據(jù)源栈戳，這個(gè)應(yīng)用的state被存儲(chǔ)在一棵object tree中岂傲，并且這個(gè)object tree只存在于唯一的Store中。
2子檀、state是只讀的镊掖，唯一改變state的方法就是觸發(fā)action，action是一個(gè)用于描述已發(fā)生事件的普通對(duì)象命锄。
3堰乔、使用純函數(shù)來(lái)執(zhí)行修改，為了描述action如何改變state tree脐恩，需要編寫reducer镐侯。
Redux數(shù)據(jù)流的管理：
1、action:把數(shù)據(jù)傳遞到Store，唯一數(shù)據(jù)來(lái)源苟翻。
2韵卤、reducer:action只描述有事情發(fā)生，reducer指明如何更新state崇猫，即設(shè)計(jì)state結(jié)構(gòu)和action處理沈条。
3、Store:把a(bǔ)ction和reducer聯(lián)系到一起诅炉，負(fù)責(zé)維持蜡歹、獲取和更新state。
4涕烧、生命周期：數(shù)據(jù)流嚴(yán)格且單向
調(diào)用Store.dispatch(action)->Store調(diào)用傳入的reducer函數(shù)月而，Store會(huì)把兩個(gè)參數(shù)傳入reducer:當(dāng)前的state樹(shù)和action->根reducer將多個(gè)子reducer輸出合并成一個(gè)單一的state樹(shù)->Store保存了根reducer，并返回完整的state樹(shù)议纯。
