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;