当我们为 React 应用程序使用 UseReducer 钩子方法时导出操作

Question

我有一个由 React hooks 构建的应用程序。所以，在使用 userReducer 的情况下，我有特殊的操作文件像这样

    export namespace PrepareReviewActions {
  export enum Types {
    TOGGLE_CONFIRMATION,
    TOGGLE_ALL_CHECKED,
    SET_EXCEPTION_TYPES,
    SET_ACTION_TYPE
  }

  export class ToggleConfirmation implements Action {
    public readonly type: Types.TOGGLE_CONFIRMATION;
    public constructor(public opened?: boolean) {}
  }

  export class ToggleAllChecked implements Action {
    public readonly type: Types.TOGGLE_ALL_CHECKED;
    public constructor(public checked?: boolean) {}
  }

  export class SetExceptionTypes implements Action {
    public readonly type: Types.SET_EXCEPTION_TYPES;
    public constructor(public exceptionTypes?: Array<string>) {}
  }

  export class SetActionTypes implements Action {
    public readonly type: Types.SET_ACTION_TYPE;
    public constructor(public actionType?: string) {}
  }

  export type All = ToggleConfirmation | ToggleAllChecked | SetExceptionTypes | SetActionTypes;
}

我关于这一行的问题export type All = ToggleConfirmation | ToggleAllChecked | SetExceptionTypes | SetActionTypes;

为什么 | （竖线）用于连接？

如果我使用 &（与号）有什么不同？例如：

 export type All = ToggleConfirmation & ToggleAllChecked & SetExceptionTypes & SetActionTypes;

Answer 1

export type All = ToggleConfirmation | ToggleAllChecked | SetExceptionTypes | SetActionTypes;

这称为 联合类型，这意味着类型 All 可以具有在 |.[=14 之间声明的类型之一=]

文档：https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#union-types

 export type All = ToggleConfirmation & ToggleAllChecked & SetExceptionTypes & SetActionTypes;

这称为 Intersection Type，这意味着类型 All 必须具有在 & 之间声明的那些类型的所有成员。

文档：https://www.typescriptlang.org/docs/handbook/2/objects.html#intersection-types

在您的特定情况下，您最好使用联合类型，因为每次您只会向减速器发送一个操作。因此，您将使用 Union 类型 All 来告诉 reducer 它可以接收其中一种类型。

当我们为 React 应用程序使用 UseReducer 钩子方法时导出操作

Export actions when we use the UseReducer hook approach for React app

reactjs

typescript

react-hooks

use-reducer