react redux typescript: cannot pass inherited props from parent to class container

Question

Code I define the component class and connect it as follows:

export class SkypeConversationArea extends React.Component<Props> {..}
const mapStateToProps = (state: State) => {
  return {
    loading: state.loading,
    hangUp: state.conversation.hangUp,
    selfParticipantStatus: state.conversation.selfParticipant.status
  }
}

const mapDispatchToProps = (dispatch: any) => {
  return {
    saveRef: (ref: HTMLElement) => {
      dispatch(saveConersationAreaRef(ref))
    },
    setFullscreen: (set: boolean) => {
      dispatch(setFullscreen(set))
    }
  }
}

type ReceivedProps = {
  lifecycleEndpointNotifyConfigured: (event: LIFECYCLE_EVENT) => any
};
type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = ReturnType<typeof mapDispatchToProps>;
type Props = StateProps & DispatchProps & ReceivedProps;

export default connect<StateProps, DispatchProps, ReceivedProps>(mapStateToProps, mapDispatchToProps)(SkypeConversationArea);

When I attempt to use the component in a parent component's render function, and pass in only "receivedProps", as such:

<SkypeConversationArea lifecycleEndpointNotifyConfigured={props.lifecycleEndpointNotifyConfigured} />

I get the error

TS2322: Type '{ lifecycleEndpointNotifyConfigured: (event: string) => any; }' is not assignable to type 'Readonly'. Property 'loading' is missing in type '{ lifecycleEndpointNotifyConfigured: (event: string) => any; }'.

My understanding is that I should be able to pass props from the parent and not have to worry about including the props in mapstatetoprops and mapdispatchtoprops. I believe that this is a bug, but I'm new to react-redux-typescript so not sure.

Harshita Gupta Harshita Gupta · Accepted Answer · 2018-06-20T21:52:56

I figured it out. It was a problem with the connect statement that I don't think I understand. Solution posted for those who are interested. I would love to learn why folks think this happened!

Changing the component definition file to say the following:

export const SkypeConversationAreaController = connect<StateProps, DispatchProps, ReceivedProps>(mapStateToProps, mapDispatchToProps)(SkypeConversationArea);

export default SkypeConversationAreaController;

and the JSX to be the following:

<SkypeConversationArea lifecycleEndpointNotifyConfigured={props.lifecycleEndpointNotifyConfigured} />

did the trick! Not sure why the connect/export default wasn't working otherwise, but oh well.

react redux typescript: cannot pass inherited props from parent to class container

1 Answers