React 之mapStateToProps、mapDispatchToProps以及connect的理解

参考文档：https://dvajs.com/guide/

 

示例：

const mapStateToProps = (state) => ({

 instanceItem: state['@instanceItem'].item,

})

const mapDispatchToProps = (dispatch) => ({

 fetchList(params) {

   dispatch({

     type: getEffectName('fetchList'),

     payload: params

   })

 }

})

@connect(mapStateToProps, mapDispatchToProps)

class Test extends Component {

  static propTypes = {}
  static defaultProps = {}
  state = {}
  render() {
  return (
  <div>
     <h1 style = {myStyle}>测试</h1>,
    </div>
    )
}
}

export default Test

顾名思义：

mapStateToProps：将需要的state的节点注入到与此视图数据相关的组件（props）上.也即用于建立 State 到 Props 的映射关系。这个函数中要注入全部的models，你需要返回一个新的对象，挑选该组件所需要的models。

mapDispatchToProps：将需要绑定的响应事件注入到组件上（props上）。
connect：它的作用是将组件和models结合在一起。将models中的state绑定到组件的props中。并提供一些额外的功能，譬如dispatch。connect 方法返回的也是一个 React 组件，通常称为容器组件。因为它是原始 UI 组件的容器，即在外面包了一层 State。

关于connect 的作用机制，可以简单地描述为：

• 将数据模型中的 state 映射到组件 props
• 将数据模型中的 reducer 或 effect 以 dispatch(action) 的形态映射到组件 props
• 当数据模型中的 state 发生变化时，通知关联的组件进行更新