Using ConnectedComponentClass type React-Redux written in Typescript

Question

I consider using a more strict type for my connected React-Redux component.

const ConnectedSelectionFilter = connect(mapsStateToProps, mapDispatchToProps)(SelectionFilter)

The generic type ConnectedComponentClass from React-Redux requires 2 type arguments

ConnectedComponentClass<C, P> = ComponentClass<JSX.LibraryManagedAttributes<C, P>, any> & {
    WrappedComponent: C;
}

C obviously refers to the wrapped component, but I'm not sure what does P refer to. I tried ComponentProps (though it can be extracted from the component type) and ownProps but it doesn't work.

How should I use this type generic? An example would be helpful.

I think it can be actually useful to make sure a wrapped component isn't accidentally changed for something else. — Mikhail Batcer
– Mikhail Batcer, Commented Mar 28 at 13:44

daliusd · Accepted Answer · 2019-03-03 14:52:31Z

2

Usually you don't need to use ConnectedComponentClass directly.

Common and correct way is to do following:

connect<StateProps, DispatchProps, OwnProps, State>(mapStateToProps)(ComponentHere);

StateProps is properties derived from Redux state.

Dispatch props can be only your dispatch function or more dispatch functions.

export interface DispatchProps {
    dispatch: Dispatch;
}

OwnProps - own properties of component.

State - your redux state.

ConnectedComponentClass might be useful if you import your components and need to create them dynamically, e.g. you want to keep different components sharing the same own properties in array and create them later based on your state.

ConnectedComponentClass<typeof Component, OwnProps>;

answered Mar 3, 2019 at 14:52

daliusd

1,18513 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shawn Wang Over a year ago

Better use import { DispatchProp } from 'react-redux'

Collectives™ on Stack Overflow

Using ConnectedComponentClass type React-Redux written in Typescript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related