使用 Reducer 获取 Flow 警告消息

Question

使用 React 上下文 API，我构建了这个减速器：

export const usersReducer = (state: UsersState, action: UsersAction) => {
  switch (action.type) {
    case TOGGLE_MODAL: {
      return {
        ...state,
        isModalOpen: !state.isModalOpen
      };
    }

    case CANCEL_REQUEST: {
      return {
        ...state,
        isCancelRequest: action.payload
      };
    }

    case UPDATE_COMPANY: {
      return {
        ...state,
        companyId: action.payload
      };
    }

    default: {
      return state;
    }
  }
}

关联的操作如下所示：

// Note: `ActionType` = `string`
export const TOGGLE_MODAL: ActionType = 'TOGGLE_MODAL';
export const CANCEL_REQUEST: ActionType = 'CANCEL_REQUEST';
export const UPDATE_COMPANY: ActionType = 'UPDATE_COMPANY';

type ToggleModalAction = {type: typeof TOGGLE_MODAL};
type CancelRequestAction = {type: typeof CANCEL_REQUEST, payload: boolean};
type UpdateCompanyAction = {type: typeof UPDATE_COMPANY, payload: number};

export type UsersAction = 
     | ToggleModalAction
     | CancelRequestAction
     | UpdateCompanyAction;

在两个 action.payload 实例中，Flow 是这样说的：

Cannot get `action.payload` because property `payload` is missing in  `ToggleModalAction`

我认为我定义我的 3 个“...Action”类型的方式，我可以在需要的地方包括 payload 并在不需要的地方排除它，比如 ToggleModalAction.

有什么解决办法吗？

Answer 1

通过执行 typeof TOGGLE_MODAL 等，您的 UsersAction 类型的 type 键将始终为 string。为了从 Flow 的 disjoint unions 获得类型帮助，您需要的是字符串文字本身：

type ToggleModalAction = {type: 'TOGGLE_MODAL'};
type CancelRequestAction = {type: 'CANCEL_REQUEST', payload: boolean};
type UpdateCompanyAction = {type: 'UPDATE_COMPANY', payload: number};

使用 Reducer 获取 Flow 警告消息

Getting Flow warning messages with Reducer

flowtype

typing

react-context