Question

我正在使用Visual Studio 2017 React + Redux模板并遇到问题。到目前为止，我已经按照他们的模式成功设置了商店，但现在我需要让组件访问多个州。我的状态对象我是这样设置的：

type AssociateCardToMemberProps =
    AssociateCardToMemberStore.IAssociateCardToMemberState
    & LookupMemberStore.ILookupMemberState
    & LookupCardStore.IGetCardInfoState
    & typeof AssociateCardToMemberStore.actionCreators;

然后像这样运行连接：

export default connect(
    (state: IApplicationState) => ({
        associateCardToMember: state.associateCardToMember,
        lookupMember: state.lookupMember,
        getCardInfo: state.getCardInfo
     }),
    AssociateCardToMemberStore.actionCreators
)(AssociateCardToMember);

这给了我错误：

[at-loader]中的错误./ClientApp/components/AssociateCardToMember.tsx:46:3 TS2345：类型'typeof AssociateCardToMember'的参数不能分配给'Component＆lt; {associateCardToMember：IAssociateCardToMemberState; lookupMember：ILookupMemberState; ...'。类型'typeof AssociateCardToMember'不能分配给'StatelessComponent＆lt; {associateCardToMember：IAssociateCardToMemberState; lookupMember：ILookupMem ......'。类型'typeof AssociateCardToMember'不提供签名'匹配'（props：{associateCardToMember：IAssociateCardToMemberState; lookupMember：ILookupMemberState; getCardInfo：IGetCardInfoState;}＆amp; {children？：ReactNode;}，context？：any）：ReactElement |空”。

Answer 1

我通过这个问题找到了一个优雅的解决方案：Multiple Redux states in a single component - Typescript, React, Redux

只需将属性定义更改为...

export default connect(
    (state: IApplicationState) => ({
        ...state.associateCardToMember,
        ...state.lookupMember,
        ...state.getCardInfo
    }),
    AssociateCardToMemberStore.actionCreators
)(AssociateCardToMember);

Visual Studio中的单个组件的多个状态React + Redux模板

1 个答案: