react+antd+umi 项目搭建------connect的使用方法

connect 就是 react-redux 的 connect；它是一个函数，绑定 State 到 View。connect 方法返回的也是一个 React 组件，通常称为容器组件。因为它是原始 UI 组件的容器，即在外面包了一层 State。

简单来说connect是用来连接前端的ui界面和和前端model的一个嫁接桥梁 ，通过使用connect将model里面定义的state，和dispatch，和histoey方法等传递到前端供前端使用

connect常用的写法：

方式一：mapStateToProps，class继承组件和函数组件都能用这种

​

import React, { Component } from 'react';
import { connect } from 'umi';
class Demo extends Component {
    constructor(props){
        super(props)
    }  
    render (){
        return (
            <div>
                 <span> this.props.example.zddTest</span>
            </div>
        )
    }
}
const mapStateToProps = (state) =>{
    return {
        example：state.example, //这里的example表示后面用this.props.example获取state（根节点）中exmpale命名空间（model的example.js中的state所有数据）的数据
    }
}
export default connect (mapStateToProps)(Demo) //通过这种方式来把model层的数据传递到当前组件了
​

 方式一的变种：

import React, { Component } from 'react';
import { connect } from 'umi';
class Demo extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { columns, data } = this.props.example;
    return <Table columns={columns} dataSource={data} />;
  }
}
export default connect(({ example }) => ({
  example: example,
}))(Demo);

方式二：es6注解方式引入，只能用于class继承组件

import React, { Component } from 'react';
import { connect } from 'umi';
// @connect必须写在class的上面
@connect(({ example }) => ({
  ...example,
}))
// @connect({ example })//这是上面的简写
class Demo extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { columns, data } = this.props.example;
    return <Table columns={columns} dataSource={data} />;
  }
}
export default Demo;