让 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 中返回的内容之间的兼容性：如果我在 mapDispatchToProps 中修改函数但我忘记手动更新我的Props，Flow 没有错误，但我可能会在运行时出错。

是否有办法或最佳实践让 flow 自动从 mapDispatchToProps 和 mapStateToProps 理解 this.props 的内容，或者至少在它们不同时引发错误？

Answer 1

这是一种方法：

我会在 mapStateToProps 和 mapDispatchToProps 上返回类型，并为每个类型引入类型，然后将它们组合起来并将其作为道具传递给组件。

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

这样，如果缺少某些东西，flow 应该会提醒您。

这是 Typescript 的做事方式，所以我只是在流程中复制了类似的东西，语法可能有点不同。可能您的情况还需要将 OwnProps 与 StateProps 结合起来，在这种情况下，您需要在代码中引入另一种类型 OwnProps 然后将其与 StateProps 结合，但想法是相同的，您将它们组合/相交并通过它转移到下一个消费类型。

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)