flowtype:"对象文字无法决定在redux操作中使用常量时选择哪种情况"

Question

编辑:这是一个完整的GitHub回购的最小示例,显示了该问题.

我有一个简单的Counter应用程序.以下是我的动作创作者:

actions.js

/**
 * @flow
 */

import { INCREMENT, DECREMENT } from '../constants'

type Action =
  | { type: 'INCREMENT' }
  | { type: 'DECREMENT' }

function increment(): Action {
  return {
    type: INCREMENT
  }
}

function decrement(): Action {
  return {
    type: DECREMENT
  }
}

export { increment, decrement }
export type { Action }

目前,我在increment和decrement函数中都收到错误,这些错误表明对象文字无法决定选择联合类型的情况.

要修复这些错误,我可以更改type: INCREMENT为type: 'INCREMENT'并更改type: DECREMENT为type: 'DECREMENT'.但是,我将在多个地方使用这个常量(比如reducer),所以我希望能够导入常量并在那里使用它.这不是它在flowtype中完成的方式吗？

为清楚起见,以下是其余文件:

constants.js

/**
 * @flow
 */

const INCREMENT: 'INCREMENT' = 'INCREMENT'
const DECREMENT: 'DECREMENT' = 'DECREMENT'

export {
  INCREMENT,
  DECREMENT
}

reducer.js

/**
 * @flow
 */

import { INCREMENT, DECREMENT } from '../constants'
import type { Action } from '../actions'

type State = number

function counter(state: State = 0, action: Action): State {
  switch (action.type) {
    case INCREMENT:
      return state + 1

    case DECREMENT:
      return state - 1

    default:
      return state
  }
}

export default counter

编辑:这是一个详细的错误日志

src/actions/counter.js:12
              v
 12:   return {
 13:     type: INCREMENT
 14:   }
       ^ object literal. Could not decide which case to select
 11: function increment(): Action {
                           ^^^^^^ union type
  Case 1 may work:
    8:   | { type: 'INCREMENT' }
           ^^^^^^^^^^^^^^^^^^^^^ object type
  But if it doesn't, case 2 looks promising too:
    9:   | { type: 'DECREMENT' }
           ^^^^^^^^^^^^^^^^^^^^^ object type
  Please provide additional annotation(s) to determine whether case 1 works (or consider merging it with case 2):
   13:     type: INCREMENT
                 ^^^^^^^^^ identifier `INCREMENT`

src/actions/counter.js:18
              v
 18:   return {
 19:     type: DECREMENT
 20:   }
       ^ object literal. Could not decide which case to select
 17: function decrement(): Action {
                           ^^^^^^ union type
  Case 1 may work:
    8:   | { type: 'INCREMENT' }
           ^^^^^^^^^^^^^^^^^^^^^ object type
  But if it doesn't, case 2 looks promising too:
    9:   | { type: 'DECREMENT' }
           ^^^^^^^^^^^^^^^^^^^^^ object type
  Please provide additional annotation(s) to determine whether case 1 works (or consider merging it with case 2):
   19:     type: DECREMENT
                 ^^^^^^^^^ identifier `DECREMENT`

Answer 1

尝试添加typeof到您的动作声明中：

type Action = 
  | { type: typeof INCREMENT } 
  | { type: typeof DECREMENT }

尝试在这里流动

你也可以用 $Keys

const ActionTypes = {
  INCREMENT: 'INCREMENT',
  DECREMENT: 'DECREMENT'
}

type Action = { type: $Keys<typeof ActionTypes> } 

这看起来不太冗长

此处的其他信息：https : //github.com/facebook/flow/issues/2377