很久就关注了Ant Design Pro,本来还在学习中,公司正好有个项目非常适合用这种框架快速实现。
经过一番考虑之后还是冒险直接上了。。。
整个学习过程就dva这个@connect 一脸懵逼(只会jq的基础,直接上的Ant Design Pro)
找了很多demo,包括官方的一个counter,一个todolist,都没有对应的ts方式的写法
经过一番探索,终于完成了一个基本的helloworld,拿login中的源码做例子:
//model.tsx
export interface StateType {
status?: 'ok' | 'error';
type?: string;
currentAuthority?: 'user' | 'guest' | 'admin';
}
↑StateType 的定义
//index.tsx
...
interface UserLoginProps {
dispatch: Dispatch<any>;
userLogin: StateType;
submitting: boolean;
}
...
@connect(
({
userLogin,
loading,
}: {
userLogin: StateType;
loading: {
effects: {
[key: string]: string;
};
};
}) => ({
userLogin,
submitting: loading.effects['userLogin/login'],
}),
)
class UserLogin extends Component<UserLoginProps,
UserLoginState> {
...
}
- UserLoginProps 定义了Props的数据类型,使得在UserLogin这个Component中获取参数时更明确。
- @connect是 UserLogin组件的注解,必须在class前进行注解
下面分析一下@connect:
@connect()的()中实际上是定义了一个 箭头函数 ()=>{} ,connect负责注入()中的参数,{}中的赋值是从()传入的数据赋值并绑定UserLoginProps 中的参数。
再来说一下@connect中的箭头函数()=>{}中的()里的内容
{
userLogin,
loading,
}: {
userLogin: StateType;
loading: {
effects: {
[key: string]: string;
};
};
}
:前面是{}对象,:后面是该对象的类型限定。
最后说一下connect是怎么注入的:
首先dva是基于redux的,redux的定义是所有个变量都存放在一个变量池store,dva对state的区分是根据namespace的
const Model: ModelType = {
namespace: 'userLogin',
...
}
所以connect中的userLogin就是namespace
{
userLogin,
loading,
}:
指定了之后,dva会将该namespace下的state注入到连接的组件中
连接后,就可以在render中取得该state:
render() {
const {userLogin, submitting} = this.props;
const {status, type: loginType} = userLogin;
...
}
从上面 const {status, type: loginType} = userLogin;
这句可以看出,userLogin注入的就是model中定义的state。
临时记录,有所疑问还请提出