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