Javascript 流联合类型缺少用于 redux 操作的属性

Question

我正在尝试学习如何使用 Flow，但我被困在这里。

我有一个接受不同类型操作的 redux reducer。每个动作的动作载荷都不同，例如：

const CreateNewTaskAction = (n: number) => {
    return {type: "CREATE", payload: n};
}

const AnotherAction = (r: TaskHandlerType) => {
    return {type: "WHATEVER", payload: r}
}

动作载荷的类型如下：

type TaskHandlerType = {
    ...
    childId: number,
    parentId: number,
}                                                       


export type ActionType = {                                                       
    type: string,                                                                
    payload?: string | number | TaskHandlerType,
}         

这是我的减速器的一部分：

const MyReducer = (state: StateType, action: ActionType) = {
    switch(action.type) {
        ...
        case "WHATEVER":
            ....
            var newChildrenArray = oldChildrenArray.filter((el) => {   
                return el != action.payload.childId;                   
            })                                                         
            ....

        }
    }

这是 Flow 吐出的错误：

Cannot get action.payload.childId because:
 • property childId is missing in String [1].
 • property childId is missing in undefined [2].
 • property childId is missing in Number [3].

              src/redux/reducers/tasksReducer.js
              57│             var oldChildrenArray = state[parentId].childrenIds
              58│             var elementIndex = oldChildrenArray.indexOf(action.payload)
              59│             var newChildrenArray = oldChildrenArray.filter((el) => {
              60│                 return el != action.payload.childId;
              61│             })
              62│             var newParentState = {
              63│                 ...state[parentId],

              src/redux/actions/actionType.js
 [1][2][3] 17│     payload?: string | number | TaskHandlerType ,

它正在检查动作负载是字符串或数字的情况，并警告这些类型没有属性 childId，但这就是我使用 switch 语句的原因，在该分支上，action.payload 将始终具有 childId。

那我怎么告诉 Flow 呢？

Answer 1

编辑：我刚刚注意到你的减速器正在开启action.payload。也许它应该改为打开action.type？ OP 评论说这只是问题中的一个错字。

Flow 无法推断 payload 的类型，因为它主要关心 action 参数的类型（表示 payload?: string | number | TaskHandlerType），而不是您传入的值的具体形状。

原因是：如果您添加 另一个 具有相同类型但负载形状不同的操作会发生什么？此操作可能如下所示：

{
  type: 'WHATEVER',
  payload: "foo"
}

并且 Flow 希望确保您的 reducer 能够处理它，因为根据TaskHandlerType，此操作是有效的。 你当然不会这样做，因为 Redux 操作 types 必须是唯一的，但 Flow 不知道这一点。

基本上，有一个假设——只有一个动作可以用特定的type 定义，并且它的payload 的形状总是相同的——这对 Flow 是不可见的。我不认为 Flow 有任何内置功能可以直接表达这一点......但是，幸运的是，还有另一种解决问题的方法（尽管有更多样板文件）。

您可以使用union type（类似于TaskHandlerType 中payload 的类型）告诉Flow 每个特定消息的确切形状。一种方法是这样的：

// Actions

type CreateNewTaskActionType = {| type: "CREATE", payload: number |};
const CreateNewTaskAction = (n: number): CreateNewTaskActionType => ({
    type: "CREATE",
    payload: n
});

type AnotherActionType = {| type: "WHATEVER", payload: TaskHandlerType |};
const AnotherAction = (r: TaskHandlerType): AnotherActionType => ({
    type: "WHATEVER",
    payload: r
});

// Types

type ActionType = CreateNewTaskActionType | AnotherActionType;

现在，Flow 可以知道带有type: "WHATEVER" 的值保证具有payload 类型的TaskHandlerType。

Interactive demo

希望对您有所帮助，如果您有任何其他问题，请发表评论！