React Flow 的误报

Question

在我加入我现在的团队之前，一位同事实现了 React Flow。原则上我喜欢这个想法，因为我完全理解强类型语言的力量。

然而，很明显 React Flow 严重缺乏复杂性和智能性。例如，为了符合其常见的 "errors" 之一，我们将不得不删除 Actions & Reducers 中的常量，而是使用文字字符串。这将只是为了遵守一个不理解其建议比所使用的方法更糟糕的工具而倒退。

我想其他人也遇到过这种情况。在我们的例子中，我们计划将 Flow 作为 "gatekeeper" 来确定代码是否会被合并。这将不再有效。那么您是如何解决这个难题的呢？

更新：根据下面@Alex Savin 的评论，这里有一个 Flow "limitations" 的具体示例：

操作：

// @flow

import type { SystemMessage } from '../SessionContext';
// Note: 'ActionType' is just a string
import type { ActionType } from '../../redux/FlowTypes';

export const UPDATE_SESSION_PROP: ActionType = 'UPDATE_SESSION_PROP';
export const ADD_SYSTEM_MESSAGE: ActionType = 'ADD_SYSTEM_MESSAGE';
export const CLEAR_SYSTEM_MESSAGE: ActionType = 'CLEAR_SYSTEM_MESSSAGE';

type UpdateSessionAction = {type: typeof UPDATE_SESSION_PROP,
                            propName: string,
                            payload: string | number};

type AddSystemMessageAction = {type: typeof ADD_SYSTEM_MESSAGE,
                               payload: SystemMessage};

type ClearSystemMessageAction = {type: typeof CLEAR_SYSTEM_MESSAGE};                         

export type SessionAction =
     | UpdateSessionAction
     | AddSystemMessageAction
     | ClearSystemMessageAction;

减速器：

// @flow

import type { SessionState } from '../SessionContext';
import type { SessionAction } from '../actions/Session';

import { UPDATE_SESSION_PROP, 
         ADD_SYSTEM_MESSAGE,
         CLEAR_SYSTEM_MESSAGE } from '../actions/Session';

export const sessionReducer = (state: SessionState, action: SessionAction) => {
  switch (action.type) {
    case UPDATE_SESSION_PROP: {
      return {
        ...state,
        [action.propName]: action.payload
      };
    }

    case ADD_SYSTEM_MESSAGE: {
      return {
        ...state,
        systemMessage: action.payload
      }
    }

    case CLEAR_SYSTEM_MESSAGE: {
      return {
        ...state,
        systemMessage: {}
      }
    }

    default: {
      return state;
    }
  }
}

调度调用示例：

dispatchSession({type: ADD_SYSTEM_MESSAGE, payload: {status, message}});

这些是 Flow 显示的错误：

操作：

None

减速器

The propName of action.propName:

Cannot get action.propName because property propName is missing in AddSystemMessageAction [1].Flow(InferError) Session.js(11, 61): [1] AddSystemMessageAction Cannot get action.propName because property propName is missing in ClearSystemMessageAction [1].Flow(InferError) Session.js(11, 61): [1] ClearSystemMessageAction

The payload of both action.payload instances: ``` Cannot get action.payload because property payload is missing in ClearSystemMessageAction [1].Flow(InferError) Session.js(11, 61): [1] ClearSystemMessageAction

Dispatch 调用示例：

Could not decide which case to select, since case 2 [1] may work but if it doesn't case 3 [2] looks promising too. To fix add a type annotation to status [3].Flow(InferError) Session.js(29, 8): [1] case 2 Session.js(30, 8): [2] case 3 AddUsers.js(139, 62): [3] to status

Answer 1

为什么不正确输入操作类型？喜欢this

export const UPDATE_SESSION_PROP: 'UPDATE_SESSION_PROP' = 'UPDATE_SESSION_PROP';

我知道这有点重复，但您可以尝试使用 keymirrror 等工具来避免重复

React Flow 的误报

False Positives with React Flow

reactjs

flowtype