Как верно написать архитектуру приложения?

Question

[Андрей Прозоров]

Товарищи помогите придумать архитекутуру.

Есть бек есть фронт на реакте (но последнее не имеет особого значения).

Есть страница котрая рендерит 3 разные, связанные по сути сущности.
Пример, есть год(ы) -> есть отчеты -> есть строки в отчете.
Тыкнули в год получили разные отчеты. тыкунли в год получили разные стртоки.
Эндипонит выдает все за раз (и годы и отчеты, все в одной гигантской портянке), далее я раскладываю (мапаю) это все по разным сущностям, и уже отправляю в рендер.

Суть вопроса как зархиеткурить так, чтобы мне не пришлось переписывать рендер, контероллеры, сервисы, изменив только маппер, когда придет другой программист и напишет разные эндпоинты для каждого куска информации

проблема в том что сейчас есть инфа по всем годам например. ткунули в год, подложили другую сущность, котрая благополучно храниться в памяти и опля. Когда там этого дела не будет, нужно чтобы ссылка запускала фетч. Тут сразу две проблемы.
1) подкладывать промисы в котрых ифить если есть отдать если нет, сходить туда то? тут я получиться скорее всего намешаю заные архитектурные слои в кучу
2) как рендерить в асинхронном режиме? в англяре был async pipe . как это сделать в рекате чтобы на неделю не улететь в оверинженирирг не знать.

Подсказка. Как правильно и корректно делать релейшены сущностей, чтобы можно было их с легкостью фетчить с бека, получать из кеша, читать из локалстореджа

Answer 1

[Антон Спирин]

проблема в том что сейчас есть инфа по всем годам например. ткунули в год, подложили другую сущность, котрая благополучно храниться в памяти и опля. Когда там этого дела не будет, нужно чтобы ссылка запускала фетч.

Проблема вообще не проблема. Изменить придется 3-4 строчки

подкладывать промисы в котрых ифить если есть отдать если нет, сходить туда то? тут я получиться скорее всего намешаю заные архитектурные слои в кучу

Можно использовать redux или mobX.

как рендерить в асинхронном режиме? в англяре был async pipe . как это сделать в рекате чтобы на неделю не улететь в оверинженирирг не знать.

Ключи состояния загрузки, условный рендерниг.
Простой пример:

class Example extends React.Component {
  state = { isFetching: false, error: null, data: [] };
  
  // ...
  
  render() {
    if (isFetching) return <Preloader />;
    if (error) return <Error error={error} />;
    
    return data.map(/ ... /); 
  }
}

Как правильно и корректно делать релейшены сущностей?

Можно передавать с бэкенда передавать все связанные данные с результатами запроса:

{
  posts: [],
  linked: {
    comments: {},
    users: {},
    tags: {}, 
  },
}

Вообще вам прежде чем приступать к разработке стоит изучить документацию React. Там же можно пройти tutorial. Почитать немного про экосистему, про state management библиотеки вроде redux и mobX.