感觉老师讲得不太在意细节和来龙去脉！如下本人尽力阐述下来龙去脉；希望对同学们有丢丢帮助！！！


学习redux: containers这个文件是个桥梁；,理解它很总要！containers里面写的是容器组件；顾名思义它理应只是拿来承载props的；承载props;自然是为传给UI组件来显示；containers里面的组件并不应该拿来显示内容的；

那么想想我们怎么得到props呢？(这里的props；一般是要抛向全部的数据；例如兄弟组件之间；例如两个页面的通信。)

props包含两种东西：一个是reducer对应的state的值；
另一个是：你想你的UI组件需要去触发action对吧？但是你不能直接在UI组件写action吧？所以使用mapDispatchToProps方法来加载出所有当前容器组件需要使用的action;把action当做容器组件的属性；这样你的UI组件不就可以拿到这个mapDispatchToProps这个方法准备好的action了么？

containers文件一般做两件事情：

第一件事情；将当前container文件里面要用到state转为props给显示组件用；(实际是将得到的state的一些值合并为props;);

connect(mapStateToProps,mapDispatchToProps)(MaterialApi);

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

这里connect方法里面的两个参数中的mapStateToProps会返回你想要的那几个reducer对应的那几个state 的一些值；mapDispatchToProps会返回你想在当前这个 containers文件中需要用到的action;connect这个高阶函数会将这两个方法的返回值合并成props；;然后将props传给MaterialApi这个容器组件；明白了吧；现在你的容器组件就可以
使用到；你想用的某个reducer的state的值了；你可以拿到action了；action可以让你当做容器组件的属性传给UI组件来触发了；
function mapStateToProps(state) {
return {
user: state.reducer1.user,                              //这里的state可能是多个reducer的state的合体；反正就是把多个state里面的值拿出来；然后放到一起；通过一个state的查找就行了；
age: state.reducer2.age,
param: state.reducer3.param,
}
}
如上：你看到了mapStateToProps(state)方法的参数state了吗？它是什么？怎么来的？
const rootReducer = combineReducers({
reducer1,
reducer2,
reducer3,
reducer4,
});

在我们开发项目的时候；必定有多个reducer文件;使用combineEeducers方法将多个reducer合并成一个；
我们知道一个reducer就会返回一个新的state;现在多个reducer合并成了一个reducer;下面又将这个总的reducer
合并成了一个store;
const store = createStore(reducers);
store这个对象管理着多个reducer对应的state；形象点说；一个reducer对应一个state;然后通过combineReducers将多个state合并成了一个大的state对象; React-Redux 提供Provider组件;并设置参数store，可以让容器组件的connect方法拿到store。

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

上面代码中，Provider在根组件外面包了一层，这样一来，App的所有子组件就默认都可以拿到state了。

这个大的state那就是mapStateToProps方法的参数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了！！

第二件事情：如下：我们在mapDispatchToProps方法中返回一个对象;那么每个定义在该对象的函数都将被当作 Redux action creator，而且这个对象会与 Redux store 绑定在一起，其中所定义的方法名将作为属性名，合并到组件的 props 中。这样拿到action之后；让action作为容器组件的属性；这样component的UI组件就可以调用这个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文件要调用到的action;(是写好需要用到的Action而不是所有的action)  和我们的容器组件需要传给自己的UI组件的action;
例如我们在当前页面有一个：componentWillMount方法；在里面初始化 一个action；直接actionName1（）；
这样就会自动去触发dispatch(action);

总结一下：redux的设计思想简单的说；
第一步：action :不管三七二之一；模拟出事件；

第二步：reducer:  开发中自然有多个reducer;
新建一个reducer文件只做一件事；吧多个reducer合并成一个reducer.
使用combineReducers方法来将多个reducer合并成一个；每个reducer会生成一个新的state;将多个reducer合并成一个reducer;那也就等同于将多个小的state合并成一个大的state对象；

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

第四步：action返回一个对象；这个对象交给store管理；其中reducer也是store来管理的；每次触发一个action;就会执行所有的reducer;

可以认为以上种种都是为了容器组件服务的；在containers里面计算得到state和返回的action纯对象；这样将action对象和state合并为容器组件的props;继而将props合并到UI组件中去！！

第五步：容器组件中connect方法的参数mapStateToProps方法可以得到所有的reducer对应的state从中获取指定值然后合并为组件的props;

mapDispatchToProps方法可以返回需要用的纯对象(action);方法会自动将这个对象合并到组件的props中。


初次写点文章类的东西；如有不对的地方；欢迎留言