Когда вы работаете с несколькими сущностями в приложении, может возникнуть необходимость разделить логику работы с API на несколько частей для лучшей организации кода и повышения читаемости. Инжектирование эндпоинтов позволяет вам добавлять новые запросы к уже созданному базовому API, что упрощает управление и масштабирование вашего приложения.
Организация базового API
Рекомендуется создать отдельный файл для базового API, который будет содержать общие настройки, такие как baseQuery, reducerPath и другие параметры, а также общие эндпоинты.
// baseApi.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
const baseApi = createApi({
reducerPath: 'baseApi',
baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
tagTypes: ['User', 'Post'], // Определяем типы тегов для инвалидации кэша
});
export default baseApi;
Создание эндпоинтов для различных сущностей
Теперь вы можете создать отдельные файлы для каждой сущности, добавляя в них необходимые эндпоинты и используя базовый API.
// userApi.js
import baseApi from './baseApi';
// injectEndpoints автоматически добавит эндпоинты к baseApi
const userApi = baseApi.injectEndpoints({
endpoints: (builder) => ({
fetchUsers: builder.query({
query: () => 'users',
providesTags: ['User'], // Указываем, что этот запрос использует тег 'User'
}),
addUser: builder.mutation({
query: (newUser) => ({
url: 'users',
method: 'POST',
body: newUser,
}),
invalidatesTags: ['User'], // Инвалидируем кэш для 'User'
}),
}),
overrideExisting: false, // Не переопределяем существующие эндпоинты
});
export const { useFetchUsersQuery, useAddUserMutation } = userApi;
export default userApi;
Пример эндпоинтов для постов
// postApi.js
import baseApi from './baseApi';
// injectEndpoints автоматически добавит эндпоинты к baseApi
const postApi = baseApi.injectEndpoints({
endpoints: (builder) => ({
fetchPosts: builder.query({
query: () => 'posts',
providesTags: ['Post'], // Указываем, что этот запрос использует тег 'Post'
}),
addPost: builder.mutation({
query: (newPost) => ({
url: 'posts',
method: 'POST',
body: newPost,
}),
invalidatesTags: ['Post'], // Инвалидируем кэш для 'Post'
}),
}),
overrideExisting: false, // Не переопределяем существующие эндпоинты
});
export const { useFetchPostsQuery, useAddPostMutation } = postApi;
export default postApi;
Инжектирование эндпоинтов в RTK Query позволяет вам создавать гибкую и масштабируемую архитектуру для работы с несколькими сущностями. Разделение логики API на отдельные файлы помогает поддерживать чистоту и порядок в коде, а использование базового API упрощает добавление новых эндпоинтов. Такой подход способствует улучшению читаемости и поддерживаемости вашего приложения.
Please open Telegram to view this post
VIEW IN TELEGRAM
Фронтенд в картинках — просто, наглядно и понятно. Новые знания в компактном формате каждый день.
Присоединяйтесь: @FrontendPortal
Присоединяйтесь: @FrontendPortal
🎂 Мой год перемен
В 27 лет я был в найме, только пробовал себя в менторстве, YeaHub существовал на уровне "в свободное время что-то пилим, одну страницу делаем месяц". На YouTube было 4000 подписчиков, в Telegram — 3000. Только родилась дочь, работы — море, пахал 24/7 без выходных.
Год спустя, в 28, всё иначе.
Я ушел из найма и полностью погрузился в свой проект. Сейчас в нём — 2000 зарегистрированных пользователей, 40 000 посещений за 5 месяцев, ежедневно платформу посещают 500–800 человек. Сеть каналов YeaHub выросла до 6000+ подписчиков. YouTube приближается к 10 000, Telegram — 5200.
За год для учеников я создал полноценный курс-роадмап: от основ HTML/CSS до продвинутых тем вроде Docker и CI/CD. Записал 150+ уроков, собрал базу гайдов и материалов. В мае выйдет бесплатный курс по JS DOM API на YouTube – я продолжаю делиться знаниями бесплатно.
Но главное — люди.
За этот год я обучил (и продолжаю обучать) больше 150 человек. Сообщество учеников и выпускников — уже 130+ человек. Помог трудоустроиться более 30 ребятам. Познакомился с крутыми ребятами — блогерами, менторами, экспертами. Вступил в сильные IT-сообщества. Прочувствовал мощь нетворкинга и силу окружения. Стал лучше, пересмотрел взгляды, прокачал мышление.
А ещё — это самый тёплый день рождения в моей жизни.
Утро началось с 40+ поздравлений от учеников. Жена с дочкой встретили меня с тортиком — не сдержался, прослезился 🥹. Писали коллеги, друзья, знакомые — столько тёплых слов, благодарностей и пожеланий.
Когда тебя так искренне поздравляют, когда благодарят за помощь, вдохновение и поддержку — понимаешь: я на правильном пути.
Я бесконечно благодарен миру за эти возможности, людям — за доверие и помощь, IT — за крутое комьюнити и бесконечный рост.
И знаю: впереди — ещё больше свершений. 💪
В 27 лет я был в найме, только пробовал себя в менторстве, YeaHub существовал на уровне "в свободное время что-то пилим, одну страницу делаем месяц". На YouTube было 4000 подписчиков, в Telegram — 3000. Только родилась дочь, работы — море, пахал 24/7 без выходных.
Год спустя, в 28, всё иначе.
Я ушел из найма и полностью погрузился в свой проект. Сейчас в нём — 2000 зарегистрированных пользователей, 40 000 посещений за 5 месяцев, ежедневно платформу посещают 500–800 человек. Сеть каналов YeaHub выросла до 6000+ подписчиков. YouTube приближается к 10 000, Telegram — 5200.
За год для учеников я создал полноценный курс-роадмап: от основ HTML/CSS до продвинутых тем вроде Docker и CI/CD. Записал 150+ уроков, собрал базу гайдов и материалов. В мае выйдет бесплатный курс по JS DOM API на YouTube – я продолжаю делиться знаниями бесплатно.
Но главное — люди.
За этот год я обучил (и продолжаю обучать) больше 150 человек. Сообщество учеников и выпускников — уже 130+ человек. Помог трудоустроиться более 30 ребятам. Познакомился с крутыми ребятами — блогерами, менторами, экспертами. Вступил в сильные IT-сообщества. Прочувствовал мощь нетворкинга и силу окружения. Стал лучше, пересмотрел взгляды, прокачал мышление.
А ещё — это самый тёплый день рождения в моей жизни.
Утро началось с 40+ поздравлений от учеников. Жена с дочкой встретили меня с тортиком — не сдержался, прослезился 🥹. Писали коллеги, друзья, знакомые — столько тёплых слов, благодарностей и пожеланий.
Когда тебя так искренне поздравляют, когда благодарят за помощь, вдохновение и поддержку — понимаешь: я на правильном пути.
Я бесконечно благодарен миру за эти возможности, людям — за доверие и помощь, IT — за крутое комьюнити и бесконечный рост.
И знаю: впереди — ещё больше свершений. 💪
UI Kit представляет собой систематизированную коллекцию интерфейсных компонентов, которая служит фундаментом для разработки приложений. В современных проектах наличие продуманного UI Kit перешло из категории рекомендаций в обязательное требование по нескольким ключевым причинам.
[Картинка 1: Пример Storybook]
UI Kit — это не просто коллекция кнопок и полей ввода. Это комплексная система, включающая:
- Базовые компоненты интерфейса (кнопки, формы, переключатели)
- Типографику и иерархию текста
- Цветовую палитру с семантическим значением цветов
- Систему отступов и размеров
- Состояния элементов (активное, неактивное, hover, focus)
[Картинка 2 и 3: Дизайн в Figma]
При создании компонентов для UI Kit необходимо придерживаться нескольких фундаментальных принципов
1. Семантическая корректность
Каждый компонент должен максимально точно отражать свою суть на уровне HTML-разметки. Кнопка — это <button> или <input type="button">, ссылка — <a>, поле ввода — <input> или <textarea>. Это важно не только для доступности (accessibility), но и для правильной работы в различных контекстах (например, в формах или при навигации).
2. Полнота свойств
Компонент должен поддерживать все стандартные HTML-атрибуты соответствующего элемента. Для кнопки это включает type (button, submit, reset), disabled, autofocus и другие.
3. Управляемость извне
Компонент не должен содержать внутреннюю логику состояния (где это возможно). Все состояния (активное, неактивное, загружающееся) должны управляться через пропсы. Это делает компонент предсказуемым и легко интегрируемым в любую архитектуру.
4. Принцип открытости/закрытости
Компонент должен быть закрыт для модификаций (его базовое поведение нельзя изменить), но открыт для расширения. На практике это означает:
- Возможность добавления классов через className
- Возможность передачи произвольных атрибутов
- Гибкость в контенте через children
5. Единый источник правды
Изменение компонента в UI Kit должно автоматически отражаться во всех местах его использования. Это требует тщательного проектирования API компонента на этапе создания, чтобы избежать необходимости "ветвления" логики в будущем.
Оптимальная структура для UI Kit в проекте выглядит следующим образом:
src/
ui/
Button/
Button.tsx # React-компонент
Button.stories.tsx # Документация в Storybook
Button.test.tsx # Тесты компонента
Button.module.css # Стили компонента
Input/ # Аналогичная структура для других компонентов
...
styles/
variables.css # CSS-переменные (цвета, отступы, шрифты)
typography.css # Типографика
animations.css # Анимации
global.css # Глобальные стили
Перед разработкой тщательно изучаем макеты и выделяем все варианты кнопок: Варианты по стилю, Размеры, Состояния, Дополнительные требования (иконки, текст).
[Картинка 4: Компонент Button]
При стилизации используем CSS-переменные из дизайн-системы, Для каждого варианта прописываем цвета для всех состояний.
[Картинка 5: CSS-переменные]
Создаем подробные TypeScript-интерфейсы: Объединение с нативными атрибутами button и a, Поддержка всех стандартных HTML-атрибутов, Четкое разделение кастомных и стандартных пропсов
[Картинка 6: Типизация кнопки]
Далее создаем сторисы для всех вариантов: Основной вид, Все состояния, Примеры с иконками, Вариант как ссылки
#ui #storybook #button #react
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM