Art*_*r Z 5 javascript reactjs flowtype redux
我有一个使用 Flow 类型连接到 Redux 存储的组件。我用:
"flow-bin": "^0.89.0",
"flow-typed": "^2.5.1",
"react-redux": "^5.0.7",
Run Code Online (Sandbox Code Playgroud)
我为 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;
Run Code Online (Sandbox Code Playgroud)
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;
Run Code Online (Sandbox Code Playgroud)
Flow 显示连接函数的错误:
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].
Run Code Online (Sandbox Code Playgroud)
当我设置了 my 的返回值后mapStateToProps
,mapDispatchToProps
我又遇到了另一个问题:
Flow: inexact `MapDispatchToProps` [1] is incompatible with exact object type [2].
Run Code Online (Sandbox Code Playgroud)
编辑:我已经更新了我的 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;
Run Code Online (Sandbox Code Playgroud)
并输入文件:
// @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 };
Run Code Online (Sandbox Code Playgroud)
而且我没有流量问题,但是我在这一行的索引 JS 中有 lint 问题:
const Connected = connect<NotificationsProps, OwnProps, StateProps, DispatchProps, State, Dispatch<*>>(mapStateToProps, mapDispatchToProps)(Notifications);
Run Code Online (Sandbox Code Playgroud)
紧随其后OwnProps
:
Eslint parsing error. Unexpected parsing error
Run Code Online (Sandbox Code Playgroud)
我的 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",
Run Code Online (Sandbox Code Playgroud)
我正在研究 babel 和 eslint 版本
归档时间: |
|
查看次数: |
1067 次 |
最近记录: |