Рассмотрим реализацию шаблонов проектирования «Репозиторий» и «Адаптер» в React-приложении с помощью функциональных компонентов и хуков. К концу статьи вы будете лучше понимать, как сохранить кодовую базу React чистой и поддерживаемой.

В современной разработке программного обеспечения поддержание чистого, модульного и тестируемого кода имеет решающее значение. React, популярная JavaScript-библиотека для создания пользовательских интерфейсов, поощряет архитектуру, основанную на компонентах. Однако по мере роста приложения управление данными и взаимодействие с API может стать сложным. Вот тут-то на помощь приходят такие шаблоны проектирования, как «Репозиторий» и «Адаптер».

Понимание шаблонов проектирования

1. Шаблон «Репозиторий» 

Шаблон «Репозиторий» (Repository) абстрагирует уровень данных, предоставляя интерфейс, подобный коллекции, для доступа к объектам домена. Он является посредником между доменом и слоями отображения данных, действуя как коллекция объектов домена в памяти.

2. Шаблон «Адаптер»

Шаблон «Адаптер» (Adapter) позволяет несовместимым интерфейсам работать вместе. Он преобразует интерфейс класса в другой интерфейс, который ожидают клиенты. Этот шаблон часто используется для того, чтобы заставить существующие классы работать с другими, не изменяя их исходный код.

Настройка проекта

Для начала создадим новый проект React. Если вы еще не сделали этого, установите Create React App и настройте проект:

npx create-react-app react-repo-adapter
cd react-repo-adapter

Структурирование проекта

Организуйте проект с четким разделением задач. Вот предлагаемая структура:

src/
├── adapters/
│ └── apiAdapter.js
├── components/
│ └── ItemsComponent.js
├── repositories/
│ └── dataRepository.js
├── services/
│ └── apiService.js
├── App.js
└── index.js

Реализация репозитория

Создайте репозиторий данных для управления операциями с данными.

src/repositories/dataRepository.js:

const DataRepository = (apiAdapter) => ({
getAllItems: async () => {
return await apiAdapter.get('/items');
},

getItemById: async (id) => {
return await apiAdapter.get(`/items/${id}`);
},

createItem: async (data) => {
return await apiAdapter.post('/items', data);
},

updateItem: async (id, data) => {
return await apiAdapter.put(`/items/${id}`, data);
},

deleteItem: async (id) => {
return await apiAdapter.delete(`/items/${id}`);
}
});

export default DataRepository;

Реализация адаптера

Создайте адаптер API для обработки HTTP-запросов.

src/adapters/apiAdapter.js:

import axios from 'axios';

const ApiAdapter = (baseURL) => {
const client = axios.create({
baseURL: baseURL
});

return {
get: async (url) => {
const response = await client.get(url);
return response.data;
},

post: async (url, data) => {
const response = await client.post(url, data);
return response.data;
},

put: async (url, data) => {
const response = await client.put(url, data);
return response.data;
},

delete: async (url) => {
const response = await client.delete(url);
return response.data;
}
};
};

export default ApiAdapter;

Использование репозитория и адаптера в компоненте

Теперь создадим функциональный компонент, который использует репозиторий и адаптер для получения и отображения данных.

src/components/ItemsComponent.js:

import React, { useEffect, useState } from 'react';
import DataRepository from '../repositories/dataRepository';
import ApiAdapter from '../adapters/apiAdapter';

const apiAdapter = ApiAdapter('https://api.example.com');
const dataRepository = DataRepository(apiAdapter);

const ItemsComponent = () => {
const [items, setItems] = useState([]);

useEffect(() => {
const fetchItems = async () => {
const data = await dataRepository.getAllItems();
setItems(data);
};
fetchItems();
}, []);

return (
<div>
<h1>Items</h1>
<ul>
{items.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
};

export default ItemsComponent;

Сборка всего вместе

Наконец, интегрируйте компонент в основной App-компонент.

src/App.js:

import React from 'react';
import ItemsComponent from './components/ItemsComponent';

const App = () => (
<div>
<h1>React with Repository and Adapter Pattern</h1>
<ItemsComponent />
</div>
);

export default App;
Успешного и беспроблемного программирования на React!

Читайте также:

Читайте нас в Telegram, VK и Дзен


Перевод статьи Muhammad Awais: Building a Better React Application with Repository and Adapter Design Patterns

Предыдущая статьяПишем балансировщик нагрузки на Golang
Следующая статьяШпаргалка по Kotlin Flow для продвинутых инженеров Android