在 React 中使用 TypeScript 访问 Redux 道具

Question

一直在努力连接组件中的 Redux 访问道具。发生这种情况是因为我正在将 class 组件更改为功能组件，所以我确定这是我的语法错误：

imports...


interface IVideoDetailHeroInstructorProp extends StateProps, DispatchProps {
    multipart: IMultipart;
  }

export const InstructorProfilePicture  = ({multipart}: IVideoDetailHeroInstructorProp ) => {

    useEffect(() => {
        if (multipart.videoHolder.instructorId) {
            const instructorQuery: IQuery = { 'styleId.equals': ['2'], 'instructorId.equals': ['' + multipart.videoHolder.instructorId], 'sort': ['publishedAt,desc'], 'publishedAt.specified': ['true'], 'publicationStatus.equals': [MultipartPublicationStatus.Published] };
            getSearchEntities({ query: instructorQuery, outputKey: 'Instructor:' + multipart.videoHolder.instructorId });
        }
    })

    // const { instructorList } = props; this was working on class component

    return (
        <>
        {instructorList && instructorList.length > 0 && (
          <div>
            {instructorList[0].image1 && (<img className="profile-img" src={`${process.env.CDN_S3_DOMAIN}${instructorList[0].image1}`}/>)}
          </div>
        )}
      </>
    )
};

const mapStateToProps = ({ multipart, authentication }: IRootState, ownProps) => ({
    instructorList: multipart['Instructor:' + ownProps.multipart.videoHolder.instructorId] as ReadonlyArray<IMultipart>,
    authorization: authentication.authorization
  });
  
  const mapDispatchToProps = { getSearchEntities, setSearchFilters };
  
  type StateProps = ReturnType<typeof mapStateToProps>;
  type DispatchProps = typeof mapDispatchToProps;
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(InstructorProfilePicture);

在组件的实现中：

<InstructorProfilePicture  multipart={multipart}/>

我收到这条消息（这些道具来自 Redux）：

Type '{ multipart: IMultipart; }' is missing the following properties from type 'IVideoDetailHeroInstructorProp': instructorList, authorization, getSearchEntities, setSearchFilters

谢谢！

Answer 1

这应该适合你：

interface IVideoDetailHeroInstructorProp {
    multipart: IMultipart;
    instructorList: WhatEVER,
    authorization: WhatEVER,
getSearchEntities: the action,
 setSearchFilters: the other action
  }

export const InstructorProfilePicture  = ({multipart}: IVideoDetailHeroInstructorProp ) => {

    useEffect(() => {
        if (multipart.videoHolder.instructorId) {
            const instructorQuery: IQuery = { 'styleId.equals': ['2'], 'instructorId.equals': ['' + multipart.videoHolder.instructorId], 'sort': ['publishedAt,desc'], 'publishedAt.specified': ['true'], 'publicationStatus.equals': [MultipartPublicationStatus.Published] };
            getSearchEntities({ query: instructorQuery, outputKey: 'Instructor:' + multipart.videoHolder.instructorId });
        }
    })

    // const { instructorList } = props; this was working on class component

    return (
        <>
        {instructorList && instructorList.length > 0 && (
          <div>
            {instructorList[0].image1 && (<img className="profile-img" src={`${process.env.CDN_S3_DOMAIN}${instructorList[0].image1}`}/>)}
          </div>
        )}
      </>
    )
};

const mapStateToProps = ({ multipart, authentication }: IRootState, ownProps: Partial<IVideoDetailHeroInstructorProp>) => ({
    instructorList: multipart['Instructor:' + ownProps.multipart.videoHolder.instructorId],
    authorization: authentication.authorization
  });
  
  const mapDispatchToProps = { getSearchEntities, setSearchFilters };
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(InstructorProfilePicture);

您将应传递给基本组件的内容定义为 IVideoDetailHeroInstructorProp 。这里是 multipart、instructorList、authorization、getSearchEntities、setSearchFilters。

您将 ownProps 映射为 IVideoDetailHeroInstructorProp 的任何内容，以便 InstructorProfilePicture 所需的任何内容都可以作为道具传递给它。

这保证 InstructorProfilePicture 知道什么将作为 props 出现，并且连接将在需要时用 redux props 填充它。如果需要，这还允许您在不使用 redux 的情况下使用图片，例如用于测试。

在 React 中使用 TypeScript 访问 Redux 道具

Accessing Redux props with TypeScript in React

javascript

typescript

reactjs

react-redux

react-typescript