react-redux核心api及原理

react-redux配合redux使用，可以使组件轻松的拿到全局状态，方便组件间的通信。

react-redux主要提供两个方法Provider，connect

Provider主要用来传入store，这里不再做详细介绍，相信来看这篇文章的对其使用都很了解了。

接下来详细探讨下connect

connect接收四个参数：

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

1，mapStateToProps

基本语法：mapStateToProps(state, ownProps)

参数含义：state 全局状态

                 ownProps代表组件本身的props，如果写了第二个参数ownProps，那么当prop发生变化的时候，mapStateToProps也                   会被调用。

作用：将store中的数据作为props绑定到组件中，

调用：只要store更新了就会调用mapStateToProps方法

返回结果：mapStateToProps返回的结果必须是object对象，该对象中的值将会更新到组件中

例子：

const mapStateToProps = (state) => {
    return ({
        count: state.counter.count
    })
}

2，mapDispatchToProps

基本语法：mapDispatchToProps(dispatch, [ownProps])

参数：dispatch  store.dispatch

ownProps代表组件本身的props，如果写了第二个参数ownProps，那么当prop发生变化的时候，mapDispatchToProps也会被调用。

作用：定义UI组件如何发出action，实际上就是要调用dispatch这个方法

调用：props改变

返回结果：返回包含对应action的object对象

例子：

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    increase: (...args) => dispatch(actions.increase(...args)),
    decrease: (...args) => dispatch(actions.decrease(...args))
  }
}

包装一下increase，decrease

Redux 本身提供了 bindActionCreators 函数，来将 action 包装成直接可被调用的函数。

import {bindActionCreators} from 'redux';
 
const mapDispatchToProps = (dispatch, ownProps) => {
  return bindActionCreators({
    increase: action.increase,
    decrease: action.decrease
  });
}

3，mergeProps(stateProps, dispatchProps, ownProps)

mergeProps(stateProps, dispatchProps, ownProps) 该参数非必须，

redux默认会帮你把更新维护一个新的props对象，类似调用Object.assign({}, ownProps, stateProps, dispatchProps)。

4，options

options 选项，比较简单，基本上也不大会用到

为了更好的定制化设置的一个参数，允许返回5个boolean、function的值，想了解的可以去研究api

 

参考：

https://segmentfault.com/a/1190000010416732?utm_source=tag-newest

https://www.imweb.io/topic/5a426d32a192c3b460fce354

https://blog.csdn.net/suwu150/article/details/79415085