smetaniny-react-facade v1.0.1

Пакет реализован в рамках изучения паттерна "Фасад"

PHP Facade GitHub

Преимущества использования фасадов в React

• Упрощение кода: Компоненты не нуждаются в знании всех деталей работы с API или локальными хранилищами. Фасад предоставляет удобные методы для получения данных, оформления заказов и взаимодействия с корзиной покупок.

• Отделение логики от компонентов: Компоненты сосредоточены на отображении интерфейса и взаимодействии с пользователем. Вся бизнес-логика, связанная с данными, вынесена в отдельные сервисы, что улучшает читаемость и поддерживаемость кода.

• Модульность: Использование фасадов позволяет легко изменять внутреннюю реализацию сервисов без необходимости вносить изменения в компоненты. Например, если изменится структура API, изменения коснутся только фасада, а не всех компонентов, которые с ним взаимодействуют.

• Имитация данных: Для разработки и тестирования в фасадах можно легко использовать фейковые данные, что упрощает разработку интерфейсов без зависимости от реального API. Это полезно на начальных этапах разработки или в случае недоступности API.

Основные моменты

• API Фасад: Предоставляет методы для работы с продуктами и заказами через API. Это упрощает взаимодействие с сервером, сводя работу к вызову методов получения продуктов, оформления заказа и получения данных о складах.

• Фасад работы с локальным хранилищем: Управляет корзиной покупок через localStorage. Компоненты могут добавлять товары в корзину и очищать её, используя методы фасада, не беспокоясь о том, как именно это происходит на низком уровне.

• Контекст авторизации: Для управления состоянием авторизации и доступа к админ-панели используется контекст авторизации. Фасад авторизации предоставляет методы для логина и логаута, а также контролирует, авторизован ли пользователь в данный момент.

Как это работает

Фасад служит промежуточным слоем между компонентами и источниками данных, такими как API или локальное хранилище. Это позволяет изолировать логику получения данных от компонентов и упростить интерфейсы взаимодействия с этими данными.

Когда компоненту необходимо выполнить операцию (например, получить список продуктов или оформить заказ), он вызывает соответствующий метод фасада. Фасад, в свою очередь, взаимодействует с внешними сервисами и возвращает компоненту результат.

import React from 'react';
import {
    AdminPanel, AuthProvider
} from "react-facade";

/**
 * FacadeController - это компонент, который связывает другие компоненты через фасад (простую оболочку).
 * В данном случае он использует контекст аутентификации (AuthProvider), чтобы предоставить данные о пользователе и функции
 * (например, логин, выход из системы) для AdminPanel.
 */
const FacadeController: React.FC = () => {

    return (
        <AuthProvider>
            <AdminPanel/>
        </AuthProvider>
    );
};

export default FacadeController;