group-telegram.com/reactify_IT/1417
Create:
Last Update:
Last Update:
Когда вы работаете с несколькими сущностями в приложении, может возникнуть необходимость разделить логику работы с 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 упрощает добавление новых эндпоинтов. Такой подход способствует улучшению читаемости и поддерживаемости вашего приложения.