Доброй ночи.
Пишу приложение, и уже неоднократно закрадывалась мысль, что что-то я делаю не так.
У меня сейчас вот такая структура компонентов:
Т.е. есть контейнеры (Container List и Container Item) и куча дочерних компонентов. Из контейнеров через mapDispatchToProps передаю разные функции для взаимодействия с компонентами.
Получается что я передаю функции для того чтобы изменить или получить данные для какого-то подкомпонента через всю цепочку блоков. Пример на картинке ( Component 7 -> Comp_7 List -> Comp 7 Item -> Comp 7 Item Sublist -> Comp 7 Item Sublist item)
Тут нужен другой архитектурный подход или это нормально? (То что на 1-2 уровня вложенности это нормально, я понимаю, но 5-6 это уже перебор)
Из-за такого подхода у меня постоянно возникает проблема с получением и обновлением данных.
Если вызвать функцию на получение данных в каком-то из дочерних компонентов это приводит к изменению состояния которое передается через props через всю цепочку компонентов, соответственно к перерендеру всех компонентов и грозит попаданием в вечный цикл получения данных. Получается нужно делать проверку на проверке, для того чтобы этого избежать.
Это как-то неудобно, у меня есть идея чтобы вынести List Item (stuff/:id/comp_7/:item_id) и Subitem (stuff/:id/comp_2/:item_id/sublist/:subitem_id) в отдельные контейнеры.
Но я в ней как-то не уверен. Подскажите, куда копать.
Хочется сосредоточится на логике приложения, а не боротся с бескончными циклами перерендера :(
Средний