ReactJS Как правильно организовать структуру проекта с большим количеством endpoint url?

Question

На данный момент есть такая структура:

|- src
|- - components
|- - pages
|- - config
|- - - apiURL.js
|- - utils
|- - - api
|- - - - usersApi.js
|- - - - pagesApi.js
|- - - - ...
|- - - - somethingApi.js

Файл apiURL.js:

const list = {
   users_list: '/api/user/all',
   user: '/api/user/',
   user_add: '/api/user/add',
   // ... Еще 999 строк
   test: '/test/test',
};
export default list;

Файл utils/api/userApi.js:

import list from 'config/apiURL';
const userApi = {
  getUsers: () => {
     return axios.get(list.users_list);
  },
  addUser: () => {
    return axios.post(list.user)
  },
 // Еще 999 строк
};

Файл utils/api/pagesApi.js:

import list from 'config/apiURL';
const pagesApi = {
 // 999 строк
};

Проблема в том, что самих URL очень большое количество в одном файле и там трудно ориентироваться, так же как и в файлах utils/api, потому что и самих файлов много и содержимого в них так же много. Как можно это все красиво организовать, чтобы было удобно поддерживать и развивать? Из идей сейчас только: Перенести всё api отдельно в Redux Toolkit async экшны createAsyncThunk, либо делать api отдельно для страницы или компонента:

|- pages
|- - home
|- - - index.jsx
|- - - api
|- - - - getContent.js
|- - - - url.js
|- components
|- - SomeComponent
|- - - index.jsx
|- - - api
|- - - - getContent.js

Какие есть предложения по рефакторингу?

Answer 1

Можно выносить логику в отдельные хуки для каждой страницы. Например:

home.page.tsx
use-home-page.hook.tsx

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

function useHomePage() {
  const getUser = (userId) => axios.get(`users/${id}`);
  const deleteUser = (userId) => axios.delete(`users/${id}`);
  return {
    getUser,
  }
}

Хуки, которые используются в нескольких компонентах можно выносить в директорию hooks в корне проекта.

БЛОГ НА HUSL

ReactJS Как правильно организовать структуру проекта с большим количеством endpoint url?

Ответы (1 шт):