React 之mapStateToProps、mapDispatchToProps以及connect的理解

示例:

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。

猜你喜欢

转载自blog.csdn.net/qq_35462323/article/details/91492077