正文
redux学习日志：关于react-redux
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
首先先强调一句：一定要多读官方文档，而且要精读，否则你会忽略掉很多东西！
一，Provider
刚开始看的时候，大致浏览了一下，知道了这个组件是能够接收store作为它的属性，然后它里面的子组件就可以通过props访问到store里面的所有东西了（好方便啊），然后迫不及待的写了下，发现里面的子组件的props竟然是空的（mmp），再去看一遍文档，发现，一定要用connect连接的组件才能通过props访问到store，没有用的就不能访问到了！！所以一定要看仔细了。
二，connect
connect这个函数其实最终会返回一个包着渲染组件的高阶组件。
它的基础作用如下：
1、从context里获取store
2、在componentWillMount 里通过mapStateToProps获取stateProp的值
3、在componentWillMount 里通过mapDispatchToProps获取dispatchProps的值
4、在componentWillMount 里订阅store的变化
5、将获得的stateProp，dispatchProps，还有自身的props合成一个props传给下面的组件
connect这个方法，官方的用法是：
connect([mapStateToProps], [mapDispatchToProps], [mergeProps])(MyComponent);
所以可以很明显的看出来，第一个括号里可以为空，因为都不是必选的，第二个括号里是你要连接的组件类名，所以最简单的就是
connect()(MyComponent);
这样在组件里就可以直接使用store里面的dispatch方法或者访问到store树里的state了，具体的就是this.props.dispatch()或者this.props.state()
但是这里要注意一点，connect可以不传任何参数，但是如果要使用mapDispatchToProps，就必须传mapStateToProps，否则就会报dispatch is not defined的错，如果mapStateToProps为空，可以直接传一个null
connect(null, mapDispatchToProps)(MyComponent);
接下来就是connect第一个括号里的最重要的两个参数了（mapStateToProps和mapDispatchToProps），在那之前首先弄清楚两个概念，容器组件和展示组件：
容器组件：通常是指最外层的组件，由路由直接控制的，可以使用redux，使用store，使用各种改变状态数据的方法
展示组件：通常是指拆分的小组件，它没有redux，没有store，更不会定义自己的方法，它所有的state都不会从store里面拿，而是由父组件传给他的props里拿，他的动作方法也是由props里面传的，所以它是一个比较“纯净”的组件，你传什么，他展示什么。具体的话一般都是那种复用型的组件，比如标题栏，loading组件这些。
那么什么时候才用传这两个参数，通常是展示组件connect的时候才会传这两个参数。
我们为什么要区分容器组件和展示组件？
1，分离关注，你可以更好的理解app和UI。
2，更易复用，同样的展示组件可以在不同的状态源、数据源中使用。也可以封装成容器组件，在未来重用它们。
3，展示组件是app的调色板。你可以把它们放到单独的页面，并让设计师来调整它们的样式和结构，而不用改变app的逻辑。单独的页面有静态性，你可以在上面进行screenshot regression测试。
4，这种方法会强迫你去解析布局相关的组件，比如 Sidebar, Page, ContextMenu ，强迫你去使用this.props.children，而非在不同容器中不断复制jsx那块地方。
三，mapStateToProps
类似于vuex里的mapState方法，具体使用直接上代码
function mapStateToProps(state) {
return {
value: state.count.value
}
}
// 此时store树里的initState结构为：
const initState = {
...
count: {
value: ""
}
...
}
那么此时我们要在当前展示组件中使用value的时候就可以通过this.props.value来访问到了，因为此时value已经绑定在了当前组件的props上面，当store里面的state变化的时候，展示组件会同步更新
四，mapDispatchToProps
类似于mapStateToProps，把当前组件所需要的动作也全部定义到props里面，因为通常动作执行的时候都需要dispatch(action)，所以我们直接把动作定义好，然后组件直接用就可以了，就不用再去dispatch一个action了，mapDispatchToProps全部帮你绑好了，直接上代码
import {increaseAction} from '../actions'
function mapDispatchToProps(dispatch) {
return {
onIncreaseClick: () => dispatch(increaseAction)
}
}
这里我们就可以直接在按钮上绑定这个方法，onClick={this.props.onIncreaseClick}，如果要传参数，那就在()里面加data参数，action后面也跟一个data
要使用mapDispatchToProps必须要在connect里传递mapStateToProps，如果没有要用的，就传一个null，再说一遍！
五，bindActionCreators
这个方法是redux的，把它放在这里讲是因为它搭配mapDispatchToProps比较合适，先看一下它如何替代上面的代码：
import {increaseAction} from '../actions'
function mapDispatchToProps(dispatch) {
return {
onIncreaseClick: bindActionCreators(increaseAction, dispatch)
}
}
bindActionCreators会自动给第一个参数action执行dispatch方法，这里似乎看不出它的方便，但是试想一下，如果此时有n多个方法要定义呢，照着第一种方法，那就要写n多行的dispatch(action)了，但是如果有了bindActionCreators方法，就可以直接传一个所有actions的大对象，直接上代码：
import actions from '../actions/actionCreator'
import {bindActionCreators} from 'redux' function mapDispatchToProps(dispatch) {
return {
dispatchActions: bindActionCreators(actions, dispatch)
}
}
这里的actions是actionCreator文件里所有的action的一个合集，那么此时要在组件中直接使用dispatch(loginAction)就可以用this.props.dispatchActions.loginAction()，有data就传data。
那什么情况下用bindActionCreators，什么时候不用只用第一种呢，我觉得看情况吧，如果当前组件的action比较多的话，可以把当前组件的所有action全部放在一个文件里，然后集体导出来，再用bindActionCreators，如果当前组件就一两个action，那我觉得没必要，直接用第一种就可以了。
