Ant Design最近推出了4.0版本，其中我最喜欢的改动是connect函数/装饰器的语法糖，极大的降低了我这种智商欠费者的认知成本……

1 老版本中的`connect`#

我们先看看旧版connect函数的官方示例：

1
import React from 'react';
2
import { connect } from 'dva';
3
import ProductList from '../components/ProductList';
4

5
const Products = ({ dispatch, products }) => {
6
    function handleDelete(id) {
7
        dispatch({
8
            type: 'products/delete',
9
            payload: id,
10
        });
11
    }
12

13
    return (
14
        <div>
15
            <h2>List of Products</h2>
16
            <ProductList onDelete={handleDelete} products={products} />
17
        </div>
18
    );
19
};
20

21
// export default Products;
22
export default connect(({ products }) => ({
23
  products,
24
}))(Products);

最后三行的connect函数，第一个参数是mapStateToProps函数，用于将需要的部分state传递进组件Products。示例中虽然没写，但是connect还可以再传递一个参数mapDispatchToProps，用于将封装好的dispatch传递给组件Products。

我原来经常被那一堆括号，和最后的(Products)搞晕，导致忘记最后的那一对括号……

2 新版的`connect`装饰器#

上面的代码就变成了这样：

1
import React from 'react';
2
import { connect } from 'dva';
3
import ProductList from '../components/ProductList';
4

5
const mapStateToProps = (state) => {
6
    return { products: state.products }
7
};
8
const mapDispatchToProps = (dispatch) => {
9
    return {
10
        handleDelete: (id) => {
11
            dispatch({ type: 'products/delete', payload: id });
12
        },
13
    };
14
};
15

16
@connect(mapStateToProps, mapDispatchToProps)
17
export default class Products extends Component {
18
    render() {
19
        return (
20
            <div>
21
                <h2>List of Products</h2>
22
                <ProductList onDelete={this.props.handleDelete} products={this.props.products} />
23
            </div>
24
        );
25
    }
26
}

mapStateToProps和mapDispatchToProps也都通过装饰器传入了组件的props属性，但是这样的写法确实极大的降低了认知负担。

1 老版本中的connect#

2 新版的connect装饰器#

1 老版本中的`connect`#

2 新版的`connect`装饰器#