在圖中，使用Redux管理React數(shù)據(jù)流的過程如圖所示，Store作為唯一的state樹，管理所有組件的state。組件所有的行為通過Actions來觸發(fā)，然后Action更新Store中的state,Store根據(jù)state的變化同步更新React視圖組件。
那么Store是如何和視圖綁定的呢？
在主入口文件index.js中，通過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í)際上是通過Reducers根據(jù)不同的Action.type來更新不同的state，即（previousState,action） => newState。最后利用Redux提供的函數(shù)combineReducers將所有的Reducer進(jìn)行合并，更新整個(gè)State樹。
在Redux項(xiàng)目中，利用Container容器組件作為橋梁，將React組件和Redux管理的數(shù)據(jù)流聯(lián)系起來。Container通過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) } //通過react-redux提供的connect方法將我們需要的state中的數(shù)據(jù)和actions中的方法綁定到相應(yīng)的React組件的Props上 export default connect(mapStateToProps,mapDispatchToProps)(reactComponent) </pre>
通過上面的分析，我們總結(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ì)有疑問，React的state和Redux所說的state是同一回事嗎？下面我們簡(jiǎn)要分析一下：
首先，React組件的state和props定義如下：
state-只表示一些臨時(shí)的、內(nèi)部的狀態(tài)數(shù)據(jù)，例如窗口的打開或關(guān)閉狀態(tài)。
props-通常存儲(chǔ)一些方法，一些可能需要庫存的長(zhǎng)期數(shù)據(jù)和一些需要傳遞的共享數(shù)據(jù)。
然后，Redux和React基本上只有2種聯(lián)系：
要么React從Redux的state中讀取數(shù)據(jù)，要么React通過dispatch分發(fā)action到Redux,Redux的reducer來返回一個(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沒有半毛錢關(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ù)來執(zhí)行修改，為了描述action如何改變state tree，需要編寫reducer。
Redux數(shù)據(jù)流的管理：
1、action:把數(shù)據(jù)傳遞到Store，唯一數(shù)據(jù)來源。
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樹和action->根reducer將多個(gè)子reducer輸出合并成一個(gè)單一的state樹->Store保存了根reducer，并返回完整的state樹。
