React-Redux 里面的 @connect
文章目录

Typescript 中使用 React-Redux 的

Decorator Syntax

一个标准的 Decorator 格式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function classDecorator<T extends {new(...args:any[]):{}}>(constructor:T) {
return class extends constructor {
newProperty = "new property";
hello = "override";
}
}


/* 这里将 Greeter 传给 classDecorator 生成了一个 class 并且赋给 Greeter */
@classDecorator
class Greeter {
property = "property";
hello: string;
constructor(m: string) {
this.hello = m;
}
}

console.log(new Greeter("world"));
// 本身通过 Greeter 的 constructor 传进去的 'world' 会被赋值给 hello
// 但是被 decorator 修改之后就把 hello 改写成了 override

react-redux typescript 里面使用 @connect

connect 的原本用法,是将 mapDispatchToProps 以及 mapStateToProps 连接到特定 class 里面

下方的功能一样的:

1
2
class MyReactComponent extends React.Component {}
export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);
1
2
@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {}