使用 Flowtype 覆盖 React-Redux Connect()答案

【问题标题】：Covering React-Redux Connect() using Flowtype使用 Flowtype 覆盖 React-Redux Connect()
【发布时间】：2019-01-10 13:05:22
【问题描述】：

我有以下代码：

const mapStateToFilterProps = (state:DataExplorerState, props) => ({ loading: state.loading, filters: state.filters });

const actionCreators: ActionCreators<string, Action> = { updateLoadState, updateFilters, updateChartData};

const mapDispatchToProps = (dispatch: Dispatch<Action>) => bindActionCreators(actionCreators, dispatch)

// TODO: Fix typing issue
export const FilterBoxConnect = connect(
    mapStateToFilterProps, 
    mapDispatchToProps
)(FilterBox)

“TODO”下方的代码表示它未被发现。我怎样才能覆盖它？

【问题讨论】：

标签： reactjs redux react-redux flowtype static-analysis

【解决方案1】：

我认为它被发现是因为 connect 在 0.85 之前不需要显式注释。 0.85 之后，Flow 将ask for required annotations。基本上，如果我们没有在导出时显式注释连接的组件，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].

此外，我们现在可以通过提供类型参数来显式注释 connect。

import * as React from 'react'

type OwnProps = {|
  passthrough: string,
  forMapStateToProps: string
|}

type Props = {|
  ...OwnProps,
  fromMapStateToProps: string,
  dispatch1: () => void
|}

const MyComponent = (props: Props) => (
  <div onClick={props.dispatch1}>
    {props.passthrough}
    {props.fromMapStateToProps}
  </div>
)

export default connect<Props, OwnProps, _, _, _, _>(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent)

我有更详细的指南here。

【讨论】：

【解决方案2】：

问题可能已经解决。我不知道，我没有测试它，但维护人员声称是这样的：Exhibit A，Exhibit B

【讨论】：

我已经对其进行了测试，它似乎工作正常。我立即迁移到 TypeScript 并鼓励每个人都这样做。