使用Redux连接的流抛出类型错误

时间:2017-06-14 00:11:05

标签: reactjs redux flowtype

我有以下容器:

// @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);

关于mapDispatchToProps部分:

,流程很糟糕
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

我无法理解这个问题是什么。我做错了什么?

1 个答案:

答案 0 :(得分:3)

我相信您需要为dispatch添加类型注释。例如:

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

这假设您已安装react-redux流程库定义(您应该使用flow-typed)。否则,请尝试:

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