Multiple States for single component in Visual Studio React + Redux Template

0
votes

I'm using the Visual Studio 2017 React + Redux template and running into an issue. I've followed their pattern for setting up stores successfully so far, but now I need to give a component access to more than one state. My state object I'm setting up like this:

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

And then running the connect like this:

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

This gives me the error:

ERROR in [at-loader] ./ClientApp/components/AssociateCardToMember.tsx:46:3 TS2345: Argument of type 'typeof AssociateCardToMember' is not assignable to parameter of type 'Component<{ associateCardToMember: IAssociateCardToMemberState; lookupMember: ILookupMemberState;...'. Type 'typeof AssociateCardToMember' is not assignable to type 'StatelessComponent<{ associateCardToMember: IAssociateCardToMemberState; lookupMember: ILookupMem...'. Type 'typeof AssociateCardToMember' provides no match for the signature '(props: { associateCardToMember: IAssociateCardToMemberState; lookupMember: ILookupMemberState; getCardInfo: IGetCardInfoState; } & { children?: ReactNode; }, context?: any): ReactElement | null'.

1
reactjstypescriptreduxvisual-studio-2017

1 Answers

0
votes

I found an elegant solution to this through this question: Multiple Redux states in a single component - Typescript, React, Redux

Simply change the property definition to ...

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