Make Flow 自动检测来自 mapDispatchToProps 和 mapStateToProps 的道具

Question

我在开发我的 react-native 应用程序时使用 Flow 来提供一些类型安全，我使用 redux。

这是我连接到 redux 存储的典型智能组件的示例：

import React, { Component } from 'react'

type Props = {
  user: User,
  updateUser: User => void,
}

type State = {}

default class SmartComponent extends Component<Props, State> {
  // My component methods
}

const mapStateToProps = (state, ownProps) => {
  return {
    ...ownProps,
    user: state.user
  }
}

const mapDispatchToProps = dispatch => {
  return {
    updateUser: (user: User) =>
      dispatch(updateUser(user)),
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(SmartComponent)

这行得通，但流程不会强制我在 Props 中的内容与我在 mapDispatchToProps 或 mapStateToProps 中的 return 之间的兼容性：如果我修改mapDispatchToProps 中的一个函数，但我忘记手动更新我的 Props，Flow 没有错误，但我可能会在运行时出错。

有什么方法或最佳实践可以让流自动理解 mapDispatchToProps 和 mapStateToProps 中 this.props 的内容，或者至少在它们不同时引发错误？

Answer 1

这是一种方法：

我会在 mapStateToProps 和 mapDispatchToProps 上做 return 类型，并为每个类型引入类型，然后组合它们并将其作为 prop 传递给组件。

type CombinedProps = StateProps & DispatchProps;
const mapStateToProps = (state, ownProps): StateProps
const mapDispatchToProps = (dispatch):DispatchProps

如果缺少某些内容，流程会提醒您。

这是 Typescript 的处理方式，所以我只是在流程中复制了类似的东西，语法可能有点不同。可能您的情况还需要将 OwnProps 与 StateProps 结合使用，在这种情况下，您需要在代码中再引入一种类型 OwnProps，然后将其与 StateProps 结合使用，但想法是一样的，您 combine/intersect 他们并将其传递给下一个消费类型。

import React, { Component } from 'react'

type StateProps = {
  user: User,
}

type DispatchProps = {
  user: User,
  updateUser: User => void,
}

type CombinedProps = StateProps & DispatchProps;

type State = {}

default class SmartComponent extends Component<CombinedProps , State> {
  // My component methods
}

const mapStateToProps = (state, ownProps): StateProps => {
  return {
    ...ownProps,
    user: state.user
  }
}

const mapDispatchToProps = (dispatch):DispatchProps  => {
  return {
    updateUser: (user: User) =>
      dispatch(updateUser(user)),
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(SmartComponent)

Make Flow 自动检测来自 mapDispatchToProps 和 mapStateToProps 的道具

Make Flow automatically detect props from mapDispatchToProps and mapStateToProps

redux

flowtype