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