刚接触redux的时候，发现大家对mapDispatchToProps使用有几种方法，而且都跑通了，本文来介绍下，redux的mapStateToProps，mapDispatchToProps的一些使用方式。
    mapStateToProps（state, ownProps）
    mapStateToProps是一个函数，用于建立组件跟 store 的 state 的映射关系
    作为一个函数，它可以传入两个参数，结果一定要返回一个 object
    传入mapStateToProps之后，会订阅store的状态改变，在每次 store 的 state 发生变化的时候，都会被调用
    ownProps代表组件本身的props，如果写了第二个参数ownProps，那么当prop发生变化的时候，mapStateToProps也会被调用。例如，当 props接收到来自父组件一个小小的改动，那么你所使用的 ownProps 参数，mapStateToProps 都会被重新计算）。
    mapStateToProps可以不传，如果不传，组件不会监听store的变化，也就是说Store的更新不会引起UI的更新
    example:

    1. 1. const mapStateToProps = (state) => {
    2. 2. return {
    3. 3. todoList: state.todoList
    4. 4.   }
    5. 5. }
    • 传入了props的： ```javascript
    1. const mapStateToProps = (state, ownProps) => {
    2. return {
    3. active: ownProps.filter === state.visibilityFilter
    4. }
    5. } mapDispatchToProps <br />mapDispatchToProps用于建立组件跟`store.dispatch`的映射关系,可以是一个object，也可以传入函数 <br />如果mapDispatchToProps是一个函数，它可以传入dispatch,ownProps, 定义UI组件如何发出action，实际上就是要调用dispatch这个方法javascript
    7. / 假设actions是一个import进来的值为actionCreator的object /
    8. action.increase = function (info) {
    9. return {
    10. {
    11. type:’INCREASE’，
    12. info
    13. }
    14. }
    15. }
    16. action.decrease = function (info) {
    17. return {
    18. {
    19. type:’DECREASE’，
    20. info
    21. }
    22. }
    23. }
    24. const mapDispatchToProps = (dispatch, ownProps) => {
    25. return {
    26. increase: (…args) => dispatch(actions.increase(…args)),
    27. decrease: (…args) => dispatch(actions.decrease(…args))
    28. }
    29. }
    31. //然后，定义这个组件的 Reducer。
    33. const App = connect(
    34. mapStateToProps,
    35. mapDispatchToProps
    36. )(Counter)//会将mapStateToProps和mapDispatchToProps中返回的变量通过props传到容器Counter中
    38. //定义一个容器
    39. class Counter extends Component {
    40. render() {
    41. const { value, onIncreaseClick } = this.props
    42. return (
    44. {value}
    47. )
    48. }
    49. }
    50. // Reducer
    51. function counter(state = { count: 0 }, action) {
    52. const count = state.count
    53. switch (action.type) {
    54. case ‘INCREASE’:
    55. return { count: count + 1 }
    56. case ‘DECREASE’:
    57. return { count: count - 1 }
    58. default:
    59. return state
    60. }
    61. } ```
    • 调用actions.increase()只能得到一个 action对象 {type:'INCREASE'} ，要触发这个 action 必须 在store 上调用 dispatch 方法。 diapatch正是 mapDispatchToProps的第一个参数。但是，为了不让 组件感知到 dispatch 的存在，我们需要将increase 和 decrease 两个函数包装一下，使之成为直接可被调用的函数（即，调用该方法就会触发 dispatch ）。