如何将HOC与redux compose和Typescript一起使用

npm install redux @types/react-redux

import React, { ComponentType } from 'react';
import { connect, ConnectedProps } from 'react-redux';
import { RootState } from './store'; // 假设这是根状态类型的定义

// 定义HOC接受的参数类型
interface HocProps {
  // 这里可以定义HOC需要的其他参数
}

// 定义HOC注入的props类型
interface InjectedProps {
  // 这里可以定义HOC注入的props
}

// 定义mapStateToProps函数，用于从Redux的store中获取需要的状态
const mapStateToProps = (state: RootState) => {
  // 这里可以返回需要的状态
};

// 使用connect函数创建HOC
const withRedux = <P extends InjectedProps>(
  WrappedComponent: ComponentType<P>
) => {
  // 使用ConnectedProps获取connect函数注入的props类型
  type Props = ConnectedProps<typeof connector> & HocProps;

  // 创建一个新的组件，将Redux的状态和其他props注入到WrappedComponent中
  const EnhancedComponent = (props: Props) => {
    // 这里可以使用Redux的状态和其他props
    return <WrappedComponent {...props} />;
  };

  // 使用connect函数将Redux的状态和dispatch注入到EnhancedComponent中
  const connector = connect(mapStateToProps);
  return connector(EnhancedComponent);
};

export default withRedux;

import React from 'react';
import withRedux from './withRedux';

interface MyComponentProps {
  // 这里可以定义组件的props
}

const MyComponent = (props: MyComponentProps) => {
  // 这里是组件的实现
};

export default withRedux(MyComponent);