Question

我有一个使用Flow类型连接到Redux存储的组件。我使用：

"flow-bin": "^0.89.0",
"flow-typed": "^2.5.1",
"react-redux": "^5.0.7",

我为mapStateToProps和mapDispatchToProps函数设置类型

我的index.js

// @flow
import * as React from 'react';
import { connect } from 'react-redux';
import type { Dispatch } from 'redux';
import type { DispatchProps, StateProps, NotificationItem, NotificationsProps, State, OwnProps } from './index.types';
import { createNotificationAction, createRemoveNotificationAction } from './redux';
import View from './View';

function Notifications(props: NotificationsProps) {
  return <View {...props} />;
}

const mapStateToProps = ({ notifications }: State): StateProps => ({ notifications });

const mapDispatchToProps = (dispatch: Dispatch<*>): DispatchProps => ({
  removeNotification: (item: NotificationItem) => dispatch(createRemoveNotificationAction(item)),
  createNotification: (item: NotificationItem) => dispatch(createNotificationAction(item)),
});

const Connected = connect<NotificationsProps, OwnProps, StateProps, DispatchProps, State, Dispatch<*>>(mapStateToProps, mapDispatchToProps)(Notifications);

export default Connected;

index.types.js

// @flow
import * as React from 'react';
import type { NotificationItem } from './redux';

export type StoreNotifications = {
  notifications: Array<NotificationItem>,
}

export type MapStateToProps = StoreNotifications

export type MapDispatchToProps = {
  removeNotification: (item: NotificationItem) => any,
  createNotification: (item: NotificationItem) => any,
}

export type NotificationsProps = {
  children: React.Node,
} & MapStateToProps & MapDispatchToProps;

流程向我显示连接功能的错误：

Flow: Missing type annotation for `OP`. `OP` is a type parameter declared in function type [1] and was implicitly instantiated at call of `connect` [2].

设置mapStateToProps和mapDispatchToProps的返回值后，我会遇到另一个问题：

Flow: inexact `MapDispatchToProps` [1] is incompatible with exact object type [2].

编辑：我已经更新了index.js：

// @flow
import * as React from 'react';
import { connect } from 'react-redux';
import type { Dispatch } from 'redux';
import type { DispatchProps, StateProps, NotificationItem, NotificationsProps, State, OwnProps } from './index.types';
import { createNotificationAction, createRemoveNotificationAction } from './redux';
import View from './View';

function Notifications(props: NotificationsProps) {
  return <View {...props} />;
}

const mapStateToProps = ({ notifications }: State): StateProps => ({ notifications });

const mapDispatchToProps = (dispatch: Dispatch<*>): DispatchProps => ({
  removeNotification: (item: NotificationItem) => dispatch(createRemoveNotificationAction(item)),
  createNotification: (item: NotificationItem) => dispatch(createNotificationAction(item)),
});

const Connected = connect<NotificationsProps, OwnProps, StateProps, DispatchProps, State, Dispatch<*>>(mapStateToProps, mapDispatchToProps)(Notifications);

export default Connected;

并键入文件：

// @flow
import * as React from 'react';

export type NotificationItem = {
  id: string,
  title: string,
  type: 'success' | 'warning' | 'danger',
  message: string,
  code: string,
  delay: number,
}

export type State = { +notifications: Array<NotificationItem> }

export type StateProps = {| +notifications: Array<NotificationItem> |}

export type DispatchProps = {|
  removeNotification: (item: NotificationItem) => any,
  createNotification: (item: NotificationItem) => any,
|}

export type OwnProps = {|
  children: React.Node
|}

export type NotificationsProps = { ...StateProps, ...DispatchProps, ...OwnProps };

我没有流程问题，但在这一行的索引JS中有棉绒问题：

const Connected = connect<NotificationsProps, OwnProps, StateProps, DispatchProps, State, Dispatch<*>>(mapStateToProps, mapDispatchToProps)(Notifications);

在OwnProps之后：

Eslint parsing error. Unexpected parsing error

我的babel设置：

"babel-eslint": "^8.2.6",
"babel-polyfill": "^6.26.0",
"eslint": "^5.4.0",
"eslint-config-standard": "^12.0.0",
"eslint-config-standard-react": "^7.0.0",
"eslint-loader": "^2.0.0",
"eslint-plugin-flowtype": "^2.50.0",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jest": "^21.17.0",
"eslint-plugin-node": "^6.0.1",
"eslint-plugin-promise": "^3.7.0",
"eslint-plugin-react": "^7.8.2",
"eslint-plugin-standard": "^4.0.0",
"flow-typed": "^2.5.1",

我正在研究babel和eslint版本

流：缺少OP的类型注释

0 个答案: