感覺老師講得不太在意細(xì)節(jié)和來龍去脈！如下本人精力闡述下來龍去脈；希望對同學(xué)們有丟丟幫助！??！

學(xué)習(xí)redux: containers這個文件是大關(guān)卡,理解它很總要！containers里面寫的是容器組件；顧名思義它理應(yīng)只是拿來承載props的；承載props;自然是為傳給UI組件來顯示；containers里面的組件并不應(yīng)該拿來顯示內(nèi)容的；

那么想想我們怎么得到props呢？

props包含兩種東西：一個是某個reducer對應(yīng)的state的值；或者是多個reducer對應(yīng)多個state的值；

?另一個是：你想你的UI組件需要去觸發(fā)action對吧？但是你不能直接在UI組件寫action吧？所以使用mapDispatchToProps方法來加載出所有當(dāng)前容器組件需要使用的action;把a(bǔ)ction當(dāng)做容器組件的屬性；這樣你的UI組件不就可以拿到這個containers文件中容器組件的action了么？

?reducer一般做兩件事情：

第一件事情；將當(dāng)前reducer文件里面要用到state轉(zhuǎn)為props給顯示組件用；;

?connect(mapStateToProps,mapDispatchToProps)(MaterialApi);

?這里connect方法里面的兩個方法mapStateToProps會返回你想要的那幾個reducer對應(yīng)的幾個state 的某個值；mapDispatchToProps會返回你想在當(dāng)前這個 containers文件中需要用到的action;connect這個高階函數(shù)會將這兩個方法的返回值都傳給MaterialApi這個容器組件；明白了吧；現(xiàn)在你的容器組件就可以

?使用到；你想用的某個reducer的state的值了；你可以拿到action了；action可以讓你當(dāng)做容器組件的屬性傳給UI組件來觸發(fā)了；

?function mapStateToProps(state) {

?return {

?user: state.reducer1.user,

?age: state.reducer2.age,

?param: state.reducer3.param,

?}

?}

?如上：你看到了mapStateToProps(state)方法的參數(shù)state了嗎？它是什么？怎么來的？

?const rootReducer = combineReducers({

?reducer1,

?reducer2,

?reducer3,

?reducer4,

?});

在我們開發(fā)項目的時候；必定有多個reducer文件;使用combineEeducers方法將多個reducer合并成一個；

?我們知道一個reducer就會返回一個新的state;現(xiàn)在多個reducer合并成了一個reducer;下面有將這個總的reducer

?合并成了一個store;

?const store = createStore(reducers);

?我一直覺得store是個概念性的東西；形象點說；一個reducer對應(yīng)一個state;然后通過combineReducers將多個state合并成了一個大的state對象; 這個大的state那就是mapStateToProps方法的參數(shù)state的來源了；

?既然你知道了這個大的state就是由多個小的reducer的state的合并的對象！記住它是一個對象；可以用他逆向拿到某個reducer；拿到某個

?reducer的某個值了；如上 user: state.reducer1.user,

?這樣就拿到名叫reducer1的reducer的state的user值了；

同時：mapStateToProps方法會將我們拿到的state.user轉(zhuǎn)為props;

?隨后我們在容器組件 ；在render方法中直接

?{ user,age ,param} = this.props;

?哈哈；容器組件就可以把它當(dāng)做屬性值來傳給UI組件啦?。。?/p>

第二件事情：在mapDispatchToProps方法中加載出這個reducer要用到的action;這樣拿到action之后；讓action作為容器組件的屬性；這樣component的UI

?組件就可以調(diào)用這個action了；

?function mapDispatchToProps(dispatch) {

?return {

?dispatch,

?actionName1: (params)=>dispatch(actions.actionName1(params)),

?actionName2: (params)=>dispatch(actions.actionName2(params)),

?actionName3: (params)=>dispatch(actions.actionName3(params)),

?actionMame4: (params)=>dispatch(actions.actionName4(params)),

?}

?}

?如上我們在mapDispatchToProps方法中加載出我們當(dāng)前containers文件要調(diào)用到的action;(是寫好需要用到的Action而不是所有的action) ?和我們的容器組件需要傳給自己的UI組件的action;

?例如我們在當(dāng)前頁面有一個：componentWillMount方法；在里面初始化 一個action；直接actionName1（）；

?這樣就會自動去觸發(fā)dispatch(action);

總結(jié)一下：redux的設(shè)計思想簡單的說；

第一步：action :不管三七二之一；模擬出事件；

第二步：reducer: ?開發(fā)中自然有多個reducer;?

新建一個reducer文件只做一件事；吧多個reducer合并成一個reducer.

使用combineReducers方法來將多個reducer合并成一個；每個reducer會生成一個新的state;將多個reducer合并成一個reducer;那也就等同于將多個小的state合并成一個大的state對象；

第三步： const store = createStore(reducers); 將state交給store管理；

第四步：這樣想：action和reducer都是單獨的東西；store將存儲著所有的state;

可以認(rèn)為以上種種都是為了容器組件服務(wù)的；在containers里面計算得到state并轉(zhuǎn)為props;得到需要的action也傳給顯示組件??！

第五步：容器組件中mapStateToProps方法可以得到所有的reducer對應(yīng)的state并轉(zhuǎn)為props;

mapDispatchToProps方法可以訪問到所有的action;寫好action:傳給UI組件來用。

最后：很多對redux感覺很蒙圈；其實要理清楚來龍去脈就好了；

上面是我個人的見解！如有毛?。粴g迎交流