Definitelytyped: react-redux connect ComponentDecorator input parameter type

[d-i-bondarenko]

• [x] I tried using the @types/react-redux package and had problems.
• [ ] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• [x] I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• [x] [Mention](https://github.com/blog/821-mention-somebody-they-re-notified) the authors (see Definitions by: in index.d.ts) so they can respond.
  
  
  
  • Authors: @tkqubo, @seansfkelley, @thasner
  
  

Last changes with ComponentDecorator were breaking to me. Current typings:

interface ComponentDecorator<TStateProps, TDispatchProps, TOwnProps> {
    (component: Component<TStateProps & TDispatchProps & TOwnProps>): ComponentClass<TOwnProps>;
}

Component<TStateProps & TDispatchProps & TOwnProps> can be without TOwnProps at all if you use connect with mergeProps parameter. mergeProps returns TStateProps & TDispatchProps, so it seems that only this two props are required in returned Component by connect.

[thasner]

@d-i-bondarenko could you share an example where the current typings are broken?

[thasner]

From @d-i-bondarenko on #15929:

@thasner But it's not always that way. I mean Component<TStateProps & TDispatchProps & TOwnProps> can be without TOwnProps at all if you use connect with mergeProps parameter. mergeProps returns TStateProps & TDispatchProps, so it seems that only this two props are required in returned Component by connect.

I'm not sure "mergeProps returns TStateProps & TDispatchProps" is correct.
Rather, I believe, mergeProps can return anything.
"The plain object you return from it will be passed as props to the wrapped component."

[d-i-bondarenko]

const mapStateToProps = (state: TState, ownProps: TOwnProps) => ({
    // some props here
});

const mapDispatchToProps = (dispatch: Dispatch<TState>, ownProps: TOwnProps) => ({
    // another props here
}); 

const ContainerComponent = connect(mapStateToProps, mapDispatchToProps, (stateProps, dispatchProps, ownProps) => ({ ...stateProps, ...dispatchProps }))(PresentationComponent);

@thasner something like that. Simply, PresentationComponent doesn't need ownProps, and I use them only in map-functions.

Sometimes I use connect even without mergeProps and don't need ownProps in PresentationComponent, so my PresentationComponent props are TStateProps & TDispatchProps. Now I have to add TOwnProps to my presentation components props.

[thasner]

I've added a change which allows the return type of mergeProps to be anything https://github.com/DefinitelyTyped/DefinitelyTyped/pull/16024

Sometimes I use connect even without mergeProps and don't need ownProps in PresentationComponent, so my PresentationComponent props are TStateProps & TDispatchProps. Now I have to add TOwnProps to my presentation components.

This correctly describes the behavior of omitting mergeProps:

If you omit it, Object.assign({}, ownProps, stateProps, dispatchProps) is used by default.

[d-i-bondarenko]

@thasner this overloads are great and solve my issue.

Indeed, omitting works correctly now, though it was breaking for some of my components. With new typings for mergeProps I can write components without passing ownProps further. Thank you, Thomas, waiting for update.

[d-i-bondarenko]

@thasner Hey! Why not to merge your chages in PR?

[thasner]

I'm not sure why it hasn't merged. I just pinged the thread.

[pocesar]

I'm having problems with the connect() returning a permissive (and without enforcing the props) of the underlaying class... for example export default connect()(MyClass) and later creating <MyClass /> won't show the props from MyClass. it was working before, not sure if the problem was because of the patch

maybe it's a problem with TS dev (2.3) that I'm using, not sure

[seansfkelley]

@pocesar that should be unrelated to this change. I responded on the ticket you filed.

[thasner]

We should be able to close this now.

Fixed by https://github.com/DefinitelyTyped/DefinitelyTyped/pull/16024