1

I have the following container:

// @flow

import { connect } from 'react-redux';
import { authLogin } from '../../redux/actions/authentication';
import UserAuthenticator from './UserAuthenticator';

function mapStateToProps({ authentication }) {
  return {
    validSession: authentication.validSession,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    authLogin: (email, password) => {
      dispatch(authLogin(email, password));
    },
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(UserAuthenticator);

Flow is freaking out with regards to the mapDispatchToProps part:

src/components/UserAuthenticator/UserAuthenticatorContainer.js:21
 21: export default connect(mapStateToProps, mapDispatchToProps)(UserAuthenticator);
                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ function call. Function cannot be called on any member of intersection type
 21: export default connect(mapStateToProps, mapDispatchToProps)(UserAuthenticator);
                    ^^^^^^^ intersection
  Member 1:
                                 v-------
   52:   declare function connect<A, OP>(
   53:     ...rest: Array<void> // <= workaround for https://github.com/facebook/flow/issues/2360
   54:   ): Connector<OP, $Supertype<{ dispatch: Dispatch<A> } & OP>>;
         -----------------------------------------------------------^ polymorphic type: function type. See lib: flow-typed/npm/react-redux_v5.x.x.js:52
  Error:
   21: export default connect(mapStateToProps, mapDispatchToProps)(UserAuthenticator);
                              ^^^^^^^^^^^^^^^ function. This type is incompatible with
   53:     ...rest: Array<void> // <= workaround for https://github.com/facebook/flow/issues/2360
                          ^^^^ undefined. See lib: flow-typed/npm/react-redux_v5.x.x.js:53
  Member 2:
                                 v-------
   56:   declare function connect<A, OP>(
   57:     mapStateToProps: Null,
   58:     mapDispatchToProps: Null,
  ...:
   61:   ): Connector<OP, $Supertype<{ dispatch: Dispatch<A> } & OP>>;
         -----------------------------------------------------------^ polymorphic type: function type. See lib: flow-typed/npm/react-redux_v5.x.x.js:56
  Error:
   21: export default connect(mapStateToProps, mapDispatchToProps)(UserAuthenticator);
                              ^^^^^^^^^^^^^^^ function. This type is incompatible with
   57:     mapStateToProps: Null,
                            ^^^^ union: null | undefined. See lib: flow-typed/npm/react-redux_v5.x.x.js:57
    Member 1:
     50:   declare type Null = null | void;
                               ^^^^ null. See lib: flow-typed/npm/react-redux_v5.x.x.js:50
    Error:
     21: export default connect(mapStateToProps, mapDispatchToProps)(UserAuthenticator);
                                ^^^^^^^^^^^^^^^ function. This type is incompatible with
     50:   declare type Null = null | void;
                               ^^^^ null. See lib: flow-typed/npm/react-redux_v5.x.x.js:50
    Member 2:
     50:   declare type Null = null | void;
                                      ^^^^ undefined. See lib: flow-typed/npm/react-redux_v5.x.x.js:50
    Error:
     21: export default connect(mapStateToProps, mapDispatchToProps)(UserAuthenticator);
                                ^^^^^^^^^^^^^^^ function. This type is incompatible with
     50:   declare type Null = null | void;
                                      ^^^^ undefined. See lib: flow-typed/npm/react-redux_v5.x.x.js:50
  Member 3:
                                 v--------------
   63:   declare function connect<S, A, OP, SP>(
   64:     mapStateToProps: MapStateToProps<S, OP, SP>,
   65:     mapDispatchToProps: Null,
  ...:
   68:   ): Connector<OP, $Supertype<SP & { dispatch: Dispatch<A> } & OP>>;
         ----------------------------------------------------------------^ polymorphic type: function type. See lib: flow-typed/npm/react-redux_v5.x.x.js:63
  Error:
   21: export default connect(mapStateToProps, mapDispatchToProps)(UserAuthenticator);
                                               ^^^^^^^^^^^^^^^^^^ function. This type is incompatible with
   65:     mapDispatchToProps: Null,
                               ^^^^ union: null | undefined. See lib: flow-typed/npm/react-redux_v5.x.x.js:65
    Member 1:
     50:   declare type Null = null | void;
                               ^^^^ null. See lib: flow-typed/npm/react-redux_v5.x.x.js:50
    Error:
     21: export default connect(mapStateToProps, mapDispatchToProps)(UserAuthenticator);
                                                 ^^^^^^^^^^^^^^^^^^ function. This type is incompatible with
     50:   declare type Null = null | void;
                               ^^^^ null. See lib: flow-typed/npm/react-redux_v5.x.x.js:50
    Member 2:
     50:   declare type Null = null | void;
                                      ^^^^ undefined. See lib: flow-typed/npm/react-redux_v5.x.x.js:50
    Error:
     21: export default connect(mapStateToProps, mapDispatchToProps)(UserAuthenticator);
                                                 ^^^^^^^^^^^^^^^^^^ function. This type is incompatible with
     50:   declare type Null = null | void;
                                      ^^^^ undefined. See lib: flow-typed/npm/react-redux_v5.x.x.js:50
  Member 4:
                                 v-----------
   70:   declare function connect<A, OP, DP>(
   71:     mapStateToProps: Null,
   72:     mapDispatchToProps: MapDispatchToProps<A, OP, DP>,
  ...:
   75:   ): Connector<OP, $Supertype<DP & OP>>;
         ------------------------------------^ polymorphic type: function type. See lib: flow-typed/npm/react-redux_v5.x.x.js:70
  Error:
   21: export default connect(mapStateToProps, mapDispatchToProps)(UserAuthenticator);
                              ^^^^^^^^^^^^^^^ function. This type is incompatible with
   71:     mapStateToProps: Null,
                            ^^^^ union: null | undefined. See lib: flow-typed/npm/react-redux_v5.x.x.js:71
    Member 1:
     50:   declare type Null = null | void;
                               ^^^^ null. See lib: flow-typed/npm/react-redux_v5.x.x.js:50
    Error:
     21: export default connect(mapStateToProps, mapDispatchToProps)(UserAuthenticator);
                                ^^^^^^^^^^^^^^^ function. This type is incompatible with
     50:   declare type Null = null | void;
                               ^^^^ null. See lib: flow-typed/npm/react-redux_v5.x.x.js:50
    Member 2:
     50:   declare type Null = null | void;
                                      ^^^^ undefined. See lib: flow-typed/npm/react-redux_v5.x.x.js:50
    Error:
     21: export default connect(mapStateToProps, mapDispatchToProps)(UserAuthenticator);
                                ^^^^^^^^^^^^^^^ function. This type is incompatible with
     50:   declare type Null = null | void;
                                      ^^^^ undefined. See lib: flow-typed/npm/react-redux_v5.x.x.js:50
  Member 5:
                                 v------------------
   77:   declare function connect<S, A, OP, SP, DP>(
   78:     mapStateToProps: MapStateToProps<S, OP, SP>,
   79:     mapDispatchToProps: MapDispatchToProps<A, OP, DP>,
  ...:
   82:   ): Connector<OP, $Supertype<SP & DP & OP>>;
         -----------------------------------------^ polymorphic type: function type. See lib: flow-typed/npm/react-redux_v5.x.x.js:77
  Error:
   21: export default connect(mapStateToProps, mapDispatchToProps)(UserAuthenticator);
                                               ^^^^^^^^^^^^^^^^^^ function. Could not decide which case to select
   79:     mapDispatchToProps: MapDispatchToProps<A, OP, DP>,
                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ union type. See lib: flow-typed/npm/react-redux_v5.x.x.js:79
    Case 1 may work:
     20:   declare type MapDispatchToProps<A, OP: Object, DP: Object> = ((dispatch: Dispatch<A>, ownProps: OP) => DP) | DP;
                                                                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ function type. See lib: flow-typed/npm/react-redux_v5.x.x.js:20
    But if it doesn't, case 2 looks promising too:
     21: export default connect(mapStateToProps, mapDispatchToProps)(UserAuthenticator);
                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ type parameter `DP` of function call
    Please provide additional annotation(s) to determine whether case 1 works (or consider merging it with case 2):
     13: function mapDispatchToProps(dispatch) {
                                     ^^^^^^^^ parameter `dispatch`
  Member 6:
                                 v---------------------
   84:   declare function connect<S, A, OP, SP, DP, P>(
   85:     mapStateToProps: MapStateToProps<S, OP, SP>,
   86:     mapDispatchToProps: Null,
  ...:
   89:   ): Connector<OP, P>;
         ------------------^ polymorphic type: function type. See lib: flow-typed/npm/react-redux_v5.x.x.js:84
  Error:
   21: export default connect(mapStateToProps, mapDispatchToProps)(UserAuthenticator);
                                               ^^^^^^^^^^^^^^^^^^ function. This type is incompatible with
   86:     mapDispatchToProps: Null,
                               ^^^^ union: null | undefined. See lib: flow-typed/npm/react-redux_v5.x.x.js:86
    Member 1:
     50:   declare type Null = null | void;
                               ^^^^ null. See lib: flow-typed/npm/react-redux_v5.x.x.js:50
    Error:
     21: export default connect(mapStateToProps, mapDispatchToProps)(UserAuthenticator);
                                                 ^^^^^^^^^^^^^^^^^^ function. This type is incompatible with
     50:   declare type Null = null | void;
                               ^^^^ null. See lib: flow-typed/npm/react-redux_v5.x.x.js:50
    Member 2:
     50:   declare type Null = null | void;
                                      ^^^^ undefined. See lib: flow-typed/npm/react-redux_v5.x.x.js:50
    Error:
     21: export default connect(mapStateToProps, mapDispatchToProps)(UserAuthenticator);
                                                 ^^^^^^^^^^^^^^^^^^ function. This type is incompatible with
     50:   declare type Null = null | void;
                                      ^^^^ undefined. See lib: flow-typed/npm/react-redux_v5.x.x.js:50
  Member 7:
                                 v---------------------
   91:   declare function connect<S, A, OP, SP, DP, P>(
   92:     mapStateToProps: MapStateToProps<S, OP, SP>,
   93:     mapDispatchToProps: MapDispatchToProps<A, OP, DP>,
  ...:
   96:   ): Connector<OP, P>;
         ------------------^ polymorphic type: function type. See lib: flow-typed/npm/react-redux_v5.x.x.js:91
  Error:
   21: export default connect(mapStateToProps, mapDispatchToProps)(UserAuthenticator);
                                               ^^^^^^^^^^^^^^^^^^ function. Could not decide which case to select
   93:     mapDispatchToProps: MapDispatchToProps<A, OP, DP>,
                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ union type. See lib: flow-typed/npm/react-redux_v5.x.x.js:93
    Case 1 may work:
     20:   declare type MapDispatchToProps<A, OP: Object, DP: Object> = ((dispatch: Dispatch<A>, ownProps: OP) => DP) | DP;
                                                                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ function type. See lib: flow-typed/npm/react-redux_v5.x.x.js:20
    But if it doesn't, case 2 looks promising too:
     21: export default connect(mapStateToProps, mapDispatchToProps)(UserAuthenticator);
                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ type parameter `DP` of function call
    Please provide additional annotation(s) to determine whether case 1 works (or consider merging it with case 2):
     13: function mapDispatchToProps(dispatch) {
                                     ^^^^^^^^ parameter `dispatch`


Found 1 error

I can't make any sense of this to figure out what the problem is. What am I doing wrong?

1 Answer 1

3

I believe you'll need to add a type annotation to your dispatch. Example:

function mapDispatchToProps(dispatch: Dispatch) {
  return {
    authLogin: (email, password) => {
      dispatch(authLogin(email, password));
    }
  };
}

This is assuming you have the react-redux flow library definitions installed (which you should by using flow-typed). Otherwise, try doing:

function mapDispatchToProps(dispatch: Function) {
  return {
    authLogin: (email, password) => {
      dispatch(authLogin(email, password));
    }
  };
}
2
  • Thank you @saadq - I had spent two hours looking for an answer and all I needed was the annotation on the dispatch param. Brilliant, and thanks for taking the time to answer this for the rest of us!!
    – DaKaZ
    Commented Jul 20, 2017 at 19:52
  • Glad I could help! :)
    – Saad
    Commented Jul 20, 2017 at 19:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.