Question

我在我的react.js项目上使用 typesafe-actions 我正在尝试使用 createAsyncAction 将我的操作从标准操作更改为异步操作。

这是我的代码：

actions / users.ts

export const fetchUserStatus = createAsyncAction(
   'FETCH_USER_REQUEST',
   'FETCH_USER_SUCCESS',
   'FETCH_USER_FAILURE'
)<void, any, any>();

components / userStatus.tsx

import * as React from 'react';
import { connect } from 'react-redux';
import { fetchUserStatus } from '../actions/user';

type Props = {
    fetchUser: () => any;
};

class UserStatus extends React.Component<Props> {
    render() {
        this.props.fetchUser();
        return (<div/>);
    }
}

const mapStateToProps = () => ({});

export default connect(mapStateToProps, {
    fetchUser: fetchUserStatus.request(),
})(UserStatus);

当我尝试编译它时，出现以下错误：

Error:(31, 4) TS2345: Argument of type 'typeof UserStatus' is not assignable to parameter of type 'ComponentType<Shared<{ fetchUser: EmptyAction<"FETCH_USER_REQUEST">; }, Props>>'.
  Type 'typeof UserStatus' is not assignable to type 'StatelessComponent<Shared<{ fetchUser: EmptyAction<"FETCH_USER_REQUEST">; }, Props>>'.
    Type 'typeof UserStatus' provides no match for the signature '(props: Shared<{ fetchUser: EmptyAction<"FETCH_USER_REQUEST">; }, Props> & { children?: ReactNode; }, context?: any): ReactElement<any> | null'.

由于我对打字稿还很陌生，所以我不知道如何解决它。使用标准动作时，我的编码有效。

有什么想法吗？

Answer 1

好吧，这是您更改代码并输入错别字的时刻之一：

export default connect(mapStateToProps, {
    fetchUser: fetchUserStatus.request(),
})(UserStatus);

应为：

export default connect(mapStateToProps, {
    fetchUser: () => fetchUserStatus.request(),
})(UserStatus);

如何使用typesafe-actions分派异步操作？

1 个答案: