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

在开发react本机应用程序时，我使用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)

import React，{Component}来自“React”
类型道具={
用户:用户,，
updateUser:User=>void，
}
类型状态={}
默认类SmartComponent扩展组件{
//我的组件方法
}
const mapStateToProps=（state，ownProps）=>{
返回{
…拥有道具，
用户：state.user
}
}
const mapDispatchToProps=调度=>{
返回{
updateUser：（用户：用户）=>
调度（updateUser（用户）），
}
}
导出默认连接(
MapStateTops，
mapDispatchToProps，
)（智能组件）

这是可行的，但flow并没有强制我在

Props

中拥有的内容与我在

mapDispatchToProps

或

MapStateTrops

中返回的内容之间兼容：如果我在

mapDispatchToProps

中修改了一个函数，但我忘记手动更新我的

Props

，流中没有错误，但我可以在运行时得到错误

是否有一种方法或最佳实践可以让flow自动理解

this.props

中的

mapDispatchToProps

和

mapStateToProps

的内容，或者至少在它们不同时引发错误？

这里有一种方法：

我将在

mapStateToProps

和

mapDispatchToProps

上执行返回类型操作，并为每种类型引入类型，然后组合它们并将其作为道具传递给组件

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

这样，如果缺少某些内容，流应该会提醒您

这是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)

import React，{Component}来自“React”
类型StateProps={
用户:用户,，
}
类型DispatchProps={
用户:用户,，
updateUser:User=>void，
}
类型CombinedProps=StateProps和DispatchProps；
类型状态={}
默认类SmartComponent扩展组件{
//我的组件方法
}
const mapStateToProps=（state，ownProps）：StateProps=>{
返回{
…拥有道具，
用户：state.user
}
}
const mapDispatchToProps=（调度）：DispatchProps=>{
返回{
updateUser：（用户：用户）=>
调度（updateUser（用户）），
}
}
导出默认连接(
MapStateTops，
mapDispatchToProps，
)（智能组件）

您是否尝试过在中使用类型定义？还有不同版本的Flow和react redux的文件。有关如何使用这些类型的示例，请参见。