具有反应流的误报

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

动作：

无

减速器

propName的action.propName：

无法获得action.propName，因为缺少属性propNameAddSystemMessageAction[1] .Flow（InferError）Session.js（11，61）：[1]AddSystemMessageAction由于属性而无法获得action.propNamepropName中缺少ClearSystemMessageAction[1] .Flow（InferError）Session.js（11，61）：[1]ClearSystemMessageAction

两个payload实例的action.payload：```无法获取action.payload，因为缺少属性payloadClearSystemMessageAction[1] .Flow（InferError）Session.js（11，61）：[1] ClearSystemMessageAction

示例调度调用：

无法确定选择哪种情况，因为情况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';

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