Использование типа ConnectedComponentClass React-Redux, написанного на Typescript

Question

Я рассматриваю использование более строгого типа для моего подключенного компонента React-Redux.

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

Универсальному типу ConnectedComponentClass из React-Redux требуется 2 аргумента типа

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

C, очевидно, относится к обернутому компоненту, но я не уверен, к чему относится P.Я пробовал ComponentProps (хотя его можно извлечь из типа компонента) и ownProps, но он не работает.

Как использовать этот тип универсальный?Пример будет полезен.

Answer 1

Обычно вам не нужно напрямую использовать ConnectedComponentClass.

Общий и правильный способ заключается в следующем:

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

StateProps - это свойства, полученные из состояния Redux.

Диспетчерские реквизиты могут быть только вашей диспетчерской функцией или несколькими диспетчерскими функциями.

export interface DispatchProps {
    dispatch: Dispatch;
}

OwnProps - собственные свойства компонента.

State - ваше избыточное состояние.

ConnectedComponentClassможет быть полезно, если вы импортируете свои компоненты и вам нужно создавать их динамически, например, вы хотите, чтобы разные компоненты совместно использовали одни и те же собственные свойства в массиве, а потом создавали их в зависимости от вашего состояния.

ConnectedComponentClass<typeof Component, OwnProps>;