apiclient_js.md

Давайте рассмотрим пример использования контекста и хуков в React для работы с API клиентом. В этом примере мы создадим контекст для API клиента, который будет доступен во всем приложении.

1. Создание Context для API клиента: Сначала мы создадим ApiClientContext, который будет хранить наш API клиент.

import React, { createContext } from 'react';

// Создаем контекст
export const ApiClientContext = createContext();

// Компонент провайдера, который оборачивает дочерние компоненты
export const ApiClientProvider = ({ children, apiClient }) => {
  return (
    <ApiClientContext.Provider value={apiClient}>
      {children}
    </ApiClientContext.Provider>
  );
};

2. Использование API клиента в компонентах: Для использования API клиента в компоненте, мы можем использовать хук useContext.

import React, { useContext, useEffect, useState } from 'react';
import { ApiClientContext } from './ApiClientContext';

const MyComponent = () => {
  const apiClient = useContext(ApiClientContext);
  const [data, setData] = useState(null);

  useEffect(() => {
    apiClient.getData()
      .then(response => setData(response))
      .catch(error => console.error(error));
  }, [apiClient]);

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      {/* Рендерим данные здесь */}
      {JSON.stringify(data)}
    </div>
  );
};

export default MyComponent;

3. Оборачивание приложения в ApiClientProvider: В корне вашего приложения, оберните ваше приложение в ApiClientProvider, передавая API клиент как проп.

import React from 'react';
import ReactDOM from 'react-dom';
import { ApiClientProvider } from './ApiClientContext';
import MyComponent from './MyComponent';
import ApiClient from './ApiClient'; // Предположим, что ApiClient - это ваш класс для работы с API.

const apiClient = new ApiClient();

ReactDOM.render(
  <ApiClientProvider apiClient={apiClient}>
    <MyComponent />
  </ApiClientProvider>,
  document.getElementById('root')
);

В этом примере мы создаем контекст для API клиента, который затем может быть использован в любом компоненте приложения через хук useContext. Это позволяет нам избежать передачи API клиента через пропсы на каждом уровне и обеспечивает более чистую и управляемую архитектуру.