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


學習redux: containers這個文件是個橋梁；,理解它很總要！containers里面寫的是容器組件；顧名思義它理應只是拿來承載props的；承載props;自然是為傳給UI組件來顯示；containers里面的組件并不應該拿來顯示內(nèi)容的；

那么想想我們怎么得到props呢？(這里的props；一般是要拋向全部的數(shù)據(jù)；例如兄弟組件之間；例如兩個頁面的通信。)

props包含兩種東西：一個是reducer對應的state的值；
另一個是：你想你的UI組件需要去觸發(fā)action對吧？但是你不能直接在UI組件寫action吧？所以使用mapDispatchToProps方法來加載出所有當前容器組件需要使用的action;把action當做容器組件的屬性；這樣你的UI組件不就可以拿到這個mapDispatchToProps這個方法準備好的action了么？

containers文件一般做兩件事情：

第一件事情；將當前container文件里面要用到state轉(zhuǎn)為props給顯示組件用；(實際是將得到的state的一些值合并為props;);

connect(mapStateToProps,mapDispatchToProps)(MaterialApi);

(如上mapStateToProps方法得到的props；將合并到MaterialApi組件的this.props里面去！)

這里connect方法里面的兩個參數(shù)中的mapStateToProps會返回你想要的那幾個reducer對應的那幾個state 的一些值；mapDispatchToProps會返回你想在當前這個 containers文件中需要用到的action;connect這個高階函數(shù)會將這兩個方法的返回值合并成props；;然后將props傳給MaterialApi這個容器組件；明白了吧；現(xiàn)在你的容器組件就可以
使用到；你想用的某個reducer的state的值了；你可以拿到action了；action可以讓你當做容器組件的屬性傳給UI組件來觸發(fā)了；
function mapStateToProps(state) {
return {
user: state.reducer1.user, ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//這里的state可能是多個reducer的state的合體；反正就是把多個state里面的值拿出來；然后放到一起；通過一個state的查找就行了；
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對應的state；形象點說；一個reducer對應一個state;然后通過combineReducers將多個state合并成了一個大的state對象;?React-Redux 提供Provider組件;并設(shè)置參數(shù)store，可以讓容器組件的connect方法拿到store。

<Provider store={store}>
? ?<App />
?</Provider>,

上面代碼中，Provider在根組件外面包了一層，這樣一來，App的所有子組件就默認都可以拿到state了。

這個大的state那就是mapStateToProps方法的參數(shù)state的來源了；
既然你知道了這個state就是由多個小的reducer的state的合并的對象！記住它是一個對象；可以用他逆向拿到某個reducer；拿到某個
reducer的某個值了；如上 user: ?state.reducer1.user,
這樣就拿到名叫reducer1的reducer的state的user值了；

同時：mapStateToProps方法會將我們拿到的state.user合并到組件的props中;
隨后我們在UI 組件中 ；直接
{ user,age ,param} = this.props;
哈哈；UI組件就可以拿到props了?。?br />
第二件事情：如下：我們在mapDispatchToProps方法中返回一個對象;那么每個定義在該對象的函數(shù)都將被當作 Redux action creator，而且這個對象會與 Redux store 綁定在一起，其中所定義的方法名將作為屬性名，合并到組件的 props 中。這樣拿到action之后；讓action作為容器組件的屬性；這樣component的UI組件就可以調(diào)用這個action了；
function mapDispatchToProps(dispatch) {
return {
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方法中加載出我們當前containers文件要調(diào)用到的action;(是寫好需要用到的Action而不是所有的action) ?和我們的容器組件需要傳給自己的UI組件的action;
例如我們在當前頁面有一個：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返回一個對象；這個對象交給store管理；其中reducer也是store來管理的；每次觸發(fā)一個action;就會執(zhí)行所有的reducer;

可以認為以上種種都是為了容器組件服務(wù)的；在containers里面計算得到state和返回的action純對象；這樣將action對象和state合并為容器組件的props;繼而將props合并到UI組件中去！！

第五步：容器組件中connect方法的參數(shù)mapStateToProps方法可以得到所有的reducer對應的state從中獲取指定值然后合并為組件的props;

mapDispatchToProps方法可以返回需要用的純對象(action);方法會自動將這個對象合并到組件的props中。


初次寫點文章類的東西；如有不對的地方；歡迎留言