Ложные срабатывания с потоком реакции

Question

До того, как я присоединился к моей нынешней команде, коллега внедрил React Flow. В принципе, мне нравится эта идея, потому что я полностью ценю силу строго типизированных языков.

Однако стало ясно, что React Flow крайне не хватает изощренности и интеллекта. Например, чтобы соответствовать одной из распространенных «ошибок», мы должны были бы удалить константы в наших действиях и редукторах и вместо этого использовать буквенные строки. Это было бы шагом назад, чтобы просто выполнить инструмент, который не понимает, что его рекомендации хуже, чем используемый подход.

Я думаю, что другие сталкивались с этой ситуацией. В нашем случае мы планировали использовать 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, так как свойство propName отсутствует вAddSystemMessageAction [1] .Flow (InferError) Session.js (11, 61): [1] AddSystemMessageAction Невозможно получить action.propName, поскольку свойство propName отсутствует в ClearSystemMessageAction [1] .Flow (InferError)Session.js (11, 61): [1] ClearSystemMessageAction

payload обоих action.payload экземпляров: `` `Невозможно получить action.payload, так как свойство payload отсутствует в ClearSystemMessageAction [1] .Flow (InferError) Session.js (11, 61): [1] ClearSystemMessageAction

Пример вызова отправки:

Не удалось решитькакой случай выбрать, так как случай 2 [1] может работать, но если это не так, случай 3 [2] выглядит многообещающенг тоже. Для исправления добавьте аннотацию типа в status [3] .Flow (InferError) Session.js (29, 8): [1] case 2 Session.js (30, 8): [2] case 3 AddUsers.js (139, 62): от [3] до status

Answer 1

Почему бы не набирать типы действий правильно? Например, this

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

Я понимаю, что это немного повторяется, но вы можете попробовать такие инструменты, как keymirrror, чтобы избежать повторения