react redux - connect

1. 使用方法

import React from 'react'
import Home from '../components/Home';
import {connect} from 'react-redux';

const mapStateToProps = (state) =>{
    console.log("state.number:",state.homeReducer.number);
    return {
        number:state.homeReducer.numbers
    }
};
const mapDispatchToProps = (dispatch)=> {
    return {
        add:(text)=>{
            dispatch({"ADD":text})
        }
    }
};
export default connect(mapStateToProps,mapDispatchToProps)(Home);

2. 作用

connect是一个高阶函数,首先传入mapStateToProps,mapDispatchToProps,然后返回一个生产Component的函数(wrapWithConnect),然后再将真正的Component作为参数传入wrapWithConnect(MyComponent),这样就生产出一个经过包裹的Connect组件

3. connect参数

connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {})

  • mapStateToProps:
    function mapStateToProps(state, ownProps) {},这就说明这个function的返回结果可能是基于ownProps的,所以每次ownProps发生改变的时候,都需要调用这个方法进行更新

  • **mapDispatchToProps: **

  • dependsOnOwnProps就是当ownProps更新的时候,用来判断是否需要重新调用对应方法获取新的结果。

  • 判断是否渲染根据ownProps改变,是基于内层的function来定的

    • dependsOnOwnProps为false
      function mapStateToProps(state, ownProps){ return function(state){ } }
    • dependsOnOwnProps为true
      function mapStateToProps(state){ return function(state, ownProps){ } }
  • mergeProps:
    用于自定义需要合并props里的值

  • options

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容