Как избавиться от спагетти кода в react приложении?

Question

[Narts]

Привет! Есть приложение на react + redux.

Есть action creators в отдельном файле, есть файл для actions и для reducer.
Но файл actions как правило разрастается до 1-2к+ строк, т.к. там солянка из функций по типу

export const insertUser= (data) => ({
	type: ADD_MANAGED_ITEMS,
	payload: data
});

, так и таких функций, в которых обращаемся к api (они то и занимают бОльшую часть файла)

export const getUserData= (id) => {
	return (dispatch) => {
		return axios
			.get(`.../api/getUserData`, {
				headers: {
					'Content-Type': 'application/json',
				},
				params: {
					id: id,
				},
			})
			.then((response) => {
				dispatch(responseHandler(response));

				........

			})
			.catch(function (error) {
				return false;
			});
	};
};

Проект стараюсь разбивать на секции. То есть отдельно reducer, action creators, actions.js для каждой секции (блог, основное, форум и т.д.). Но все равно actions.js разрастается очень сильно и сложно работать с таким кодом.
Подскажите, может я что-то не так делаю? Или это норма?

Answer 1

[Vladimir Lewandowski]

1. Разделите actions.js на отдельные файлы;
2. Вынесете логику работы с бэком в отдельные файлы типа api.js;
3. Вынесите асинхронные экшны в отдельные файлы типа thunks.js (если у вас redux-thunk, по-хорошему асинхронные экшны должны через него проходить);
4. Используйте библиотеки-хелперы типа @reduxjs/toolkit.