使用 Reducer 获取流量警告消息

Question

使用 React Context API，我构建了这个 reducer：

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};