interface IProvider {
 sendMessage(messsage: string): void;
 connect<T>(config: T): void;
 disconnect(): void;
}

class TelegramProvider implements IProvider {
 connect<T>(config: T): void {
  console.log(config)
 }
 disconnect(): void {
  console.log(`Disconnected TG`)
 }
 sendMessage(messsage: string): void {
  console.log(messsage)
 }
}

class WhatAppPRovider implements IProvider {
 connect<T>(config: T): void {
  console.log(config)
 }
 disconnect(): void {
  console.log(`Disconnected WA`)
 }
 sendMessage(messsage: string): void {
  console.log(messsage)
 }
}

class NotificationSender {
 constructor (private provider: IProvider) {}

 send() {
  this.provider.connect('connect')
  this.provider.sendMessage('message')
  this.provider.disconnect()
 }
}

class DelayNotificationSender extends NotificationSender {
 constructor(provider: IProvider) {
  super(provider)
 }

 sendDeployed() {}
}

const sender = new NotificationSender(new TelegramProvider())
sender.send();

const sender2 = new NotificationSender(new WhatAppPRovider())
sender2.send();

// Общий интерфейс Компании
interface CompanyComponent {
 getName(): string;
 getDetails(): string;
}

// Лист дерева — сотрудник
class Employee implements CompanyComponent {
 constructor(private name: string, private position: string) {}

 getName(): string {
  return this.name;
 }

 getDetails(): string {
  return `${this.name}, Позиция: ${this.position}`;
 }
}

// Ветвь дерева — отдел
class Department implements CompanyComponent {
 private children: CompanyComponent[] = [];

 constructor(private name: string) {}

 getName(): string {
  return this.name;
 }

 add(component: CompanyComponent): void {
  this.children.push(component);
 }

 remove(component: CompanyComponent): void {
  this.children = this.children.filter(child => child !== component);
 }

 getDetails(): string {
  const subordinates = this.children
   .map(child => " " + child.getDetails())
   .join("\n");

  return `Отдел: ${this.name}\nСостав:\n${subordinates}`;
 }
}

// Создаем сотрудников
const employee1 = new Employee("Алиса", "Разработчик");
const employee2 = new Employee("Боб", "Дизайнер");
const employee3 = new Employee("Чарли", "Тестировщик");

// Создаем отдел Разработки
const devDepartment = new Department("Разработка");
devDepartment.add(employee1);
devDepartment.add(employee2);
devDepartment.add(employee3);

// Создаем отдел Маркетинга
const marketingDepartment = new Department("Маркетинг");
marketingDepartment.add(new Employee("Денис", "Маркетолог"));

// Создаем главный отдел Компания
const company = new Department("Компания");
company.add(devDepartment);
company.add(marketingDepartment);

// Выводим дерево компании
console.log(company.getDetails())

Отдел: Компания
Состав:
  Отдел: Разработка
  Состав:
    Алиса, Позиция: Разработчик
    Боб, Позиция: Дизайнер
    Чарли, Позиция: Тестировщик
  Отдел: Маркетинг
  Состав:
    Денис, Позиция: Маркетолог

npm i @reduxjs/toolkit react-redux

// api.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const userApi = createApi({
  reducerPath: 'userApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
  endpoints: (builder) => ({
    getUsers: builder.query({
      query: () => 'users',
    }),
  }),
});

export const { useGetUsersQuery } = userApi;

// store.ts
import { configureStore } from '@reduxjs/toolkit';
import { userApi } from './api';

export const store = configureStore({
  reducer: {
    [userApi.reducerPath]: userApi.reducer, // Добавляем в Redux Store
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(userApi.middleware), // Подключаем middleware
});

import { Provider } from 'react-redux';
import { store } from './store';

<Provider store={store}>
  <App />
</Provider>;

import React from 'react';
import { useGetUsersQuery } from './api';

export const Users = () => {
  const { data, error, isLoading } = useGetUsersQuery();

  if (isLoading) return <p>Загрузка...</p>;
  if (error) return <p>Ошибка: {error.message}</p>;

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

import { createApi } from "@reduxjs/toolkit/query/react";
import { baseQuery } from "../services/baseQuery";

export const apiSlice = createApi({
  reducerPath: "apiReducer",
  baseQuery,
  tagTypes: ["users", "someTags"], // теги наших запросов
  endpoints: () => ({})
});

// src/services
// использую axios, в основном из-за интерцептора
import type { AxiosRequestConfig, AxiosError } from "axios";
import type { BaseQueryFn } from "@reduxjs/toolkit/query/react";

const axiosBaseQuery = ({ baseUrl }: { baseUrl: string } = { baseUrl: "" }) => 
  async ({ url, method, data, params, headers }) => {
    // Ваш стандартный Axios-запрос
};

const baseQueryInstance = axiosBaseQuery({ baseUrl: process.env.BACKEND_URL || "https://api.example.com" });

// Глобальная обработка ошибок
const baseQueryWithErrorHandler = async (args, api, extraOptions) => {
  const result = await baseQueryInstance(args, api, extraOptions);
  if (!result.error) return result;

  // Обрабатываем ошибки статусов и коды
  return handleQueryError(result.error);
};

import React from 'react';
import { useGetProductsQuery } from './api';

export const Products = () => {
  const { data, error, isLoading } = useGetProductsQuery();

  if (isLoading) return <p>Загрузка данных...</p>;
  if (error) return <p>Ошибка: {error.status}</p>;
  if (!data || data.length === 0) return <p>Продукты не найдены!</p>;

  return (
    <ul>
      {data.map((product) => (
        <React.Fragment key={product.id}>
          <li>{product.name}</li>
        </React.Fragment>
      ))}
    </ul>
  );
};

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({
    baseUrl: 'https://fakeapi.com',
  }),
  endpoints: (builder) => ({
    getProducts: builder.query({
      query: () => 'products',
    }),
  }),
});

export const { useGetProductsQuery } = api;

[
  {
    "id": 1,
    "name": "Смартфон"
  },
  {
    "id": 2,
    "name": "Ноутбук"
  },
  {
    "id": 3,
    "name": "Чайник"
  }
]

// Фронтенд (JavaScript с использованием Fetch API)
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data); // Обработка данных на фронтенде
  })
  .catch(error => {
    console.error('Error:', error);
  });

// Фронтенд (JavaScript с использованием Fetch API)
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => {
    console.log(data); // Обработка ответа на фронтенде
  })
  .catch(error => {
    console.error('Error:', error);
  });

// Фронтенд (JavaScript с использованием WebSocket API)
const socket = new WebSocket('ws://example.com/socket');

socket.onopen = () => {
  console.log('WebSocket is open now.');
  socket.send(JSON.stringify({ message: 'Hello Server!' }));
};

socket.onmessage = (event) => {
  console.log('Received:', event.data);
};

socket.onclose = () => {
  console.log('WebSocket is closed now.');
};