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

Question

I have an application built by React hooks. So, In the case where using userReducer I have special actions file like this

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

My question regarding this line export type All = ToggleConfirmation | ToggleAllChecked | SetExceptionTypes | SetActionTypes;

Why | (vertical bar) is used for joining?

And what is different if I will use & (ampersand) ? Like this for example:

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

Hakim Abdelcadir · Accepted Answer · 2022-05-30T08:38:49.477

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

This is called Union Type and it means that the type All can have one of those types declared between |.

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

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

This is called Intersection Type and it means that the type All must have all the members of those types declared between &.

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

In your specific case you would preferably use a Union Type because each time you will dispatch just one action to the reducer. So you will use the Union type All to tell the reducer that it can receive one of those types.

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

1 Answers1