在圖中魁袜，使用Redux管理React數(shù)據(jù)流的過程如圖所示养渴，Store作為唯一的state樹爆办，管理所有組件的state难咕。組件所有的行為通過Actions來觸發(fā)，然后Action更新Store中的state,Store根據(jù)state的變化同步更新React視圖組件押逼。
那么Store是如何和視圖綁定的呢步藕？
在主入口文件index.js中，通過Provider標(biāo)簽把Store和視圖綁定：
//項目代碼
在項目中挑格，Store是如何具體管理State呢？實際上是通過Reducers根據(jù)不同的Action.type來更新不同的state沾歪，即（previousState,action） => newState漂彤。最后利用Redux提供的函數(shù)combineReducers將所有的Reducer進行合并，更新整個State樹灾搏。
在Redux項目中挫望，利用Container容器組件作為橋梁，將React組件和Redux管理的數(shù)據(jù)流聯(lián)系起來狂窑。Container通過connect函數(shù)將Redux的state和action轉(zhuǎn)化成展示組件即React組件所需的Props媳板。
//將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)
}
//通過react-redux提供的connect方法將我們需要的state中的數(shù)據(jù)和actions中的方法綁定到相應(yīng)的React組件的Props上
export default connect(mapStateToProps,mapDispatchToProps)(reactComponent)
通過上面的分析，我們總結(jié)為一幅更詳細(xì)的圖示：
注冊Store：
//applyMiddleware可以包裝Store的dispatch,thunk的作用是使action創(chuàng)建函數(shù)可以返回一個function替代action對象
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore)
... ...
const store = createStoreWithMiddleware(reducer,initialState)
這里可能有同學(xué)會有疑問泉哈，React的state和Redux所說的state是同一回事嗎蛉幸？下面我們簡要分析一下：
首先，React組件的state和props定義如下：
state-只表示一些臨時的丛晦、內(nèi)部的狀態(tài)數(shù)據(jù)奕纫，例如窗口的打開或關(guān)閉狀態(tài)。
props-通常存儲一些方法烫沙，一些可能需要庫存的長期數(shù)據(jù)和一些需要傳遞的共享數(shù)據(jù)匹层。
然后，Redux和React基本上只有2種聯(lián)系：
要么React從Redux的state中讀取數(shù)據(jù)锌蓄，要么React通過dispatch分發(fā)action到Redux,Redux的reducer來返回一個新的state升筏。
結(jié)論是Redux的state存放的是全局的長期數(shù)據(jù)，也就是對應(yīng)的React組件的Props數(shù)據(jù)瘸爽，而組件React的state應(yīng)該是臨時的內(nèi)部狀態(tài)數(shù)據(jù)您访，所以這兩個state沒有半毛錢關(guān)系。
下面我們總結(jié)一下Redux的三大原則和數(shù)據(jù)流的管理：
Redux三大原則：
1蝶糯、單一數(shù)據(jù)源洋只，這個應(yīng)用的state被存儲在一棵object tree中辆沦，并且這個object tree只存在于唯一的Store中。
2识虚、state是只讀的肢扯，唯一改變state的方法就是觸發(fā)action，action是一個用于描述已發(fā)生事件的普通對象担锤。
3蔚晨、使用純函數(shù)來執(zhí)行修改，為了描述action如何改變state tree肛循，需要編寫reducer铭腕。
Redux數(shù)據(jù)流的管理：
1、action:把數(shù)據(jù)傳遞到Store多糠，唯一數(shù)據(jù)來源累舷。
2、reducer:action只描述有事情發(fā)生夹孔，reducer指明如何更新state被盈，即設(shè)計state結(jié)構(gòu)和action處理。
3搭伤、Store:把action和reducer聯(lián)系到一起只怎，負(fù)責(zé)維持、獲取和更新state怜俐。
4身堡、生命周期：數(shù)據(jù)流嚴(yán)格且單向
調(diào)用Store.dispatch(action)->Store調(diào)用傳入的reducer函數(shù)，Store會把兩個參數(shù)傳入reducer:當(dāng)前的state樹和action->根reducer將多個子reducer輸出合并成一個單一的state樹->Store保存了根reducer拍鲤，并返回完整的state樹贴谎。
