使用React中的TypeScript访问Redux道具

Question

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

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(：

类型"｛multipart:IMultipart；｝"缺少以下属性来自类型"IVideoDetailHeroInstructionorProp"：instructionrList，授权，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映射为IVideoDetailHeroConstructorProp的任何内容，这样讲师ProfilePicture所需的任何内容都可以作为道具传递给它。

这保证了InstructorProfilePicture知道什么将作为道具出现，并且如果需要，连接只会用redux道具填充它。这也允许您在需要时使用图片而不进行冗余，例如用于测试。