How to use the @ngrx/store.union function in @ngrx/store

'[InviteFriends] Invite friends',
  props<{ booking: Booking }>(),
);

export const inviteFriendsSuccess = createAction(
  '[InviteFriends] Invite friends success',
  props<{ bookingResponse: BookingResponse }>(),
);

export const inviteFriendsFail = createAction(
  '[InviteFriends] Invite friends Fail',
  props<{ error: Error }>(),
);

// action types
const all = union({
  bookTable,
  bookTableSuccess,
  bookTableFail,
  inviteFriends,
  inviteFriendsSuccess,
  inviteFriendsFail,
});
export type BookTableActions = typeof all;

export const sendOrders = createAction(
  '[SendOrder] Load SendOrders',
  props<{ token: string }>(),
);

export const sendOrdersSuccess = createAction(
  '[SendOrder] Load SendOrders Success',
);

export const sendOrdersFail = createAction(
  '[SendOrder] Load SendOrders Fail',
  props<{ error: string }>(),
);

// action types
const all = union({
  sendOrders,
  sendOrdersSuccess,
  sendOrdersFail,
});
export type SendOrdersAction = typeof all;

);

export const deleteOrder = createAction(
  '[Order] Delete Order',
  props<{ id: string }>(),
);

export const deleteOrders = createAction(
  '[Order] Delete Orders',
  props<{ ids: string[] }>(),
);

export const clearOrders = createAction('[Order] Clear Orders');

// action types
const all = union({
  loadOrders,
  addOrder,
  addOrders,
  updateOrder,
  updateOrders,
  deleteOrder,
  deleteOrders,
  clearOrders,
});
export type OrdersAction = typeof all;

'[Menu] Load Menus Success',
  props<{ pageable?: Pageable; content?: DishView[] }>(),
);

export const loadMenusFail = createAction(
  '[Menu] Load Menus Fail',
  props<{ error: Error }>(),
);

export const updateDishExtras = createAction(
  '[Menu] Select Dish Extras',
  props<{ dish: DishView }>(),
);

// action types
const all = union({
  loadMenus,
  loadMenusSuccess,
  loadMenusFail,
  updateDishExtras,
});
export type MenuActions = typeof all;

);

export const logout = createAction('[Auth] Logout');

export const logoutFail = createAction(
  '[Auth] LogoutFail',
  props<{ error: Error }>(),
);

export const verifyTwoFactor = createAction(
  '[Auth] VerifyTwoFactor',
  props<{ username: string; password: string }>(),
);

// action types
const all = union({
  openDialog,
  closeDialog,
  login,
  loginSuccess,
  loginFail,
  token,
  logout,
  logoutFail,
  verifyTwoFactor,
});
export type AuthActions = typeof all;

it('should support reducers with multiple actions', () => {
        const both = union({ bar, foo });
        const func = (state: {}, action: typeof both) => ({});
        const result = on(foo, bar, func);
        expect(result.types).toContain(bar.type);
        expect(result.types).toContain(foo.type);
      });
    });

it('should narrow the action', () => {
      const foo = createAction('FOO', props<{ foo: number }>());
      const bar = createAction('BAR', props<{ bar: number }>());
      const both = union({ foo, bar });
      const narrow = (action: typeof both) => {
        if (action.type === foo.type) {
          expect(action.foo).toEqual(42);
        } else {
          throw new Error('Should not get here.');
        }
      };

      narrow(foo({ foo: 42 }));
    });