我们在文档中专门介绍了这一主题：

• https://redux-toolkit.js.org/rtk-query/usage/usage-without-react-hooks
• https://redux-toolkit.js.org/rtk-query/usage/examples#react-class-components

根据这些页面，您需要执行以下操作：

const mapState = (
  state: RootState,
  ownProps: RouteComponentProps<{ id: string }>
) => ({
  id: Number(ownProps.match.params.id),
  post: endpoints.getPost.select(Number(ownProps.match.params.id))(state),
  updatePostState: endpoints.updatePost.select(ownProps.match.params.id)(state), // TODO: make selectors work with the requestId of the mutation?
  deletePostState: endpoints.updatePost.select(ownProps.match.params.id)(state)
});

const mapDispatch = {
  getPost: endpoints.getPost.initiate,
  updatePost: endpoints.updatePost.initiate,
  deletePost: endpoints.deletePost.initiate
};

const connector = connect(mapState, mapDispatch);
type PostDetailProps = ConnectedProps<typeof connector> & RouteComponentProps;

export class PostDetailComp extends React.Component<PostDetailProps> {
  state = {
    isEditing: false
  };

  componentDidMount() {
    const { id, getPost } = this.props;
    getPost(id);
  }

  componentDidUpdate(prevProps: PostDetailProps) {
    const { id, getPost } = this.props;
    if (id !== prevProps.id) {
      getPost(id);
    }
  }

  render() {
    const { isEditing } = this.state;
    const {
      // state
      id,
      post: { data: post, isLoading: isPostLoading },
      updatePostState: { isLoading: isUpdateLoading },
      deletePostState: { isLoading: isDeleteLoading },

      // actions
      updatePost,
      deletePost
    } = this.props;

    // snip rendering logic
}

export const PostDetail = connector(PostDetailComp);

但是，**我们 * 强烈 * 建议您将这些组件转换为函数组件，并使用自动生成的查询钩子！**这将 * 更加 * 简单和易于使用，而且钩子有许多内置功能，这些功能很难在类组件中手动复制。