React Flow 的误报

Question

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

但是，很明显，React Flow 严重缺乏复杂性和智能性。例如，为了遵守其常见的“错误”之一，我们必须删除 Actions & Reducers 中的常量，而使用文字字符串。这只是为了遵从一个不了解其建议比使用的方法更糟糕的工具而倒退。

我认为其他人也遇到过这种情况。在我们的案例中，我们计划让 Flow 作为代码是否会被合并的“看门人”。这将不再起作用。那么您是如何解决这个难题的呢？

更新：根据下面@Alex Savin 的评论，这是 Flow 的“限制”的一个具体示例：

动作：

// @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 显示的错误：

动作：

无

减速器

action.propName 的propName：

无法获取action.propName，因为属性propName 缺失 AddSystemMessageAction [1].Flow(InferError) Session.js(11, 61): [1] AddSystemMessageAction 无法获取 action.propName 因为属性 propName 在 ClearSystemMessageAction 中缺失 [1].Flow(InferError) Session.js(11, 61): [1] ClearSystemMessageAction

两个action.payload 实例的payload：``` 无法获取 action.payload 因为属性 payload 在 ClearSystemMessageAction [1].Flow(InferError) Session.js(11, 61): [1]ClearSystemMessageAction

示例 Dispatch 调用：

无法决定选择哪种情况，因为情况 2 [1] 可能有效，但 如果不是，案例 3 [2] 看起来也很有希望。修复添加类型 注释status [3].Flow(InferError) Session.js(29, 8): [1] 案例 2 Session.js(30, 8): [2] 案例 3 AddUsers.js(139, 62): [3] 到 status

Answer 1

为什么不能正确输入动作类型？赞this

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

我知道这有点重复，但是您可以尝试使用 keymirror 之类的工具来避免重复