Question

我有这种类型：

export type Action<P> = {
  type: string,
  payload: P
}

我现在需要将返回类型传递给Dispatch，我想成为Action<number>或Action<boolean>

为什么我不能这样做？

const mapDispatchToProps = (dispatch: Dispatch<Action<number | boolean>>) => {
  return bindActionCreators(
    {
      updateAlertModalHeight: updateAlertModalHeight,
      updateAlertModalIsOpen: updateAlertModalIsOpen,
      updateHasYesNo: updateAlertModalHasYesNo
    },
    dispatch
  )
}

它也不会让我做Action<number> | Action<boolean>。

错误是：

因为数字[1]不兼容，所以无法呼叫bindActionCreators 在类型实参P [4]的类型实参A [3]中具有布尔[2] 类型参数updateAlertModalHeight的属性C。（参考： [1] [2] [3] [4]）流

我要去哪里错了？

以下是错误消息中的updateAlertModalHeight：

export const updateAlertModalHeight: ActionCreator<Action<number>, number> = (
  payload
) => ({
  type: UPDATE_ALERT_MODAL_HEIGHT,
  payload
})

和：

export const updateAlertModalIsOpen: ActionCreator<Action<boolean>, boolean> = (
  payload
) => ({
  type: UPDATE_ALERT_MODAL_IS_OPEN,
  payload
})

两个动作创建者的类型不同，Flow不允许在同一bindActionCreators调用中使用它们。如何获得允许的流量？

当我将所有类型都设置为这种类型时，这一切似乎都起作用了

export type ActionT = Action<boolean | string | number>

export const updateAlertModalIsOpen: ActionCreator<ActionT, boolean> = (
  payload
) => ({
  type: UPDATE_ALERT_MODAL_IS_OPEN,
  payload
})

和：

const mapDispatchToProps = (dispatch: Dispatch<ActionT>) => {

但这不是很具体的类型，它很烂，因为它没有描述返回的是哪种类型的动作。

我想编辑redux类型定义以允许多种Action类型，但是很难理解要进行哪些更改。

Answer 1

dispatch的通用类型参数是不变的，这意味着它只能是您指定的完全以外的其他内容，尤其是不能专门用于number来自boolean|number。直观上，类型信息number比boolean|number更具体。

实际的问题是bindActionCreators的类型，它强制执行与您将dispatch赋予两者 updateAlertModalHeight，和 updateAlertModalIsOpen。但是这些函数采用不同的类型参数！一个带数字，一个带布尔值，因此类型检查器无法正确推断类型。当您更改updateAlertModalHeight和updateAlertModalIsOpen的类型参数以允许使用任何一种类型调用时，它都起作用，即说“如果传递数字就可以，我将忽略它，并且仅当你给我一个布尔值。”类型系统认为它可以两者同时传递number和boolean到函数，因此可以进行所有类型检查。

这里不依赖于更改参数类型的真正解决方案是对bindActionCreators进行两次调用，一次调用number-dispatch，一次调用{{1 }}-boolean。

Answer 2

要向前迈进，我摆脱了自定义类型Action，从而使流程变得安静，并导入了Redux的类型Action，例如import type { Action } from 'redux'。 Redux使用的是

  declare export type Action<T> = {
    type: T
  }

我觉得有点奇怪，因为type字段在redux动作中总是一个字符串。例如'UPDATE_ALERT_MODAL_IS_OPEN'。因此，指定字符串毫无意义。我总是用Action<string>

键入它们

我的动作创建者成为：

export const updateAlertModalIsOpen: ActionCreator<Action<string>, boolean> = (
  payload
) => ({
  type: UPDATE_ALERT_MODAL_IS_OPEN,
  payload
})

mapDispatchToProps变为：

const mapDispatchToProps = (dispatch: Dispatch<Action<string>>) => {
  return bindActionCreators(
    {
      updateAlertModalIsOpen,
      updateAlertModalHeight,
      updateHasYesNo: updateAlertModalHasYesNo
    },
    dispatch
  )
}

Redux流-传递联合类型给出错误

2 个答案: