Flow error - react-redux_v5.x.x - connect(mapStateToProps, mapDispatchToProps, mergeProps)(HOC)

Hi, since updating Flow type definitions this morning I’m now getting this error:

lib/routes/notifications/index.js:107
107: export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(Notifications);
                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ function call. Function cannot be called on any member of intersection type
                                       v
 38:   declare type Connector<OP, P> = {
 39:     (component: StatelessComponent<P>): ConnectedComponentClass<OP, P, void, void>;
 40:     <Def, St>(component: Class<React$Component<Def, P, St>>): ConnectedComponentClass<OP, P, Def, St>;
 41:   };
       ^ intersection. See lib: flow-typed/npm/react-redux_v5.x.x.js:38
  Member 1:
   39:     (component: StatelessComponent<P>): ConnectedComponentClass<OP, P, void, void>;
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ function type. See lib: flow-typed/npm/react-redux_v5.x.x.js:39
  Error:
   39:     (component: StatelessComponent<P>): ConnectedComponentClass<OP, P, void, void>;
                       ^^^^^^^^^^^^^^^^^^^^^ function type. Callable signature not found in. See lib: flow-typed/npm/react-redux_v5.x.x.js:39
  107: export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(Notifications);
                                                                               ^^^^^^^^^^^^^ statics of React$Component
  Member 2:
   40:     <Def, St>(component: Class<React$Component<Def, P, St>>): ConnectedComponentClass<OP, P, Def, St>;
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ polymorphic type: function type. See lib: flow-typed/npm/react-redux_v5.x.x.js:40
  Error:
  222: export default withRouter(injectIntl(reduxForm(reduxFormProps)(Notifications)));
                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ type parameter `P` of function call. This type is incompatible with. See: lib/routes/notifications/component.js:222
   22:   declare type MergeProps<SP, DP: Object, OP: Object, P: Object> = (stateProps: SP, dispatchProps: DP, ownProps: OP) => P;
                                                                ^^^^^^ object type. See lib: flow-typed/npm/react-redux_v5.x.x.js:22

connect reference where Notifications is a HOC:

export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(Notifications);

Looking at connect definitions in react-redux_v5.x.x it seems that this:

declare function connect<S, A, OP, SP, DP, P>(
  mapStateToProps: MapStateToProps<S, OP, SP>,
  mapDispatchToProps: Null,
  mergeProps: MergeProps<SP, DP, OP, P>,
  options?: ConnectOptions
): Connector<OP, P>;

should be returning a Connector with a $Supertype:

declare function connect<S, A, OP, SP, DP, P>(
    mapStateToProps: MapStateToProps<S, OP, SP>,
    mapDispatchToProps: MapDispatchToProps<A, OP, DP>,
    mergeProps: MergeProps<SP, DP, OP, P>,
    options?: ConnectOptions
): Connector<OP, $Supertype<DP & OP>>;

Adding this fixes the issue for me.

[mingvase]

But I don’t have a dispatch parameter in my mapDispatchToProps?

const mapDispatchToProps = {
    getNotifications: loadNotifications,
    saveNotifications,
    changeZone
};

Converting the above to have a dispatch parameter and type didn’t work either.

@timdorr Can you re-open this please.

[mingvase]

@timdorr Apologies for that, thanks for your reply!