Как правильно организовать общение между компонентами?
Имеется карточка товара. На ней множество мелких компонентов. Например, "Добавить в избранное". Элемент простейший - при клике сердечко должно закраситься, при повторном потерять окрас. Вопрос в организации кода. Я при клике изменяю элемент через state. Если обновлять его в родителе, то перерендеривается весь родительский компонент, поэтому вынес его отдельно, проблема исчезла. Но мне нужно еще делать отправку данных на сервер при клике. По идее тогда мне запрос на сервер тоже делать в этом маленьком компоненте?
Это не сочитается с принципом, что у нас все запросы должны быть в главном умном компоненте, а остальные должны быть простыми, без стейта и запросов. Но если все делать через основной будет куда перерендеров. Как вы поступаете в такой ситуации?
Концепция умных и глупых компонентов хороша. Я долгое время строил архитектуру в которой есть главный компонент в котором идет подключение к стору и импорту необходимых переменных а затем прокидывал через пропсы данные от родителя вниз. И когда проект рос то сильно рос и файл подключения. В итоге все пришло к тому что если нужны данные из стора только маленькому компоненту то лучше через connect их достать врямо в компонете. Код становится не на много больше зато все под рукой и понятно откуда данные пришли.
Роман Александрович, с этим понятно. Я немного о другом. Если мне надо обновить маленький компонент без стора, допускается ли сделать компонент "умным" и работать со стейком в нем и запросы на сервер делать из него? Или же это противоречит хорошим практикам?
Можно сделать так:
1. Метод оnClick передается из родительского компонента.
2. state иконки высчитывается по полученным props, но так же меняется по клику, для более комфортного пользовательского опыта.
3. По возвращению ответа от сервера обновляется вся карточка. Так же, обновляется state иконки в computeDerivedState, мало ли была ошибка и товар не попал в избранное.
4. В случае ошибки, левом нижнем углу экрана можно показать всплывающее уведомление. Для этого можно написать action и вызывать его в блоке catch асинхронных действий.
То есть вы предлагаете все равно обновить всю карточку? Я хотел от этого уйти. Плохая идея раскидать обновления стейт и запросы к серверу по маленьким компонентам? Тогда будут рендеоиться только необходимые
Даниил Сугоняев, ну тут все зависит от того как вы получаете и используете метаданные товара. Если они не используются в карточке, а подобная иконка на весь проект одна, то можно и в ней все определить и не дергать всю карточку. Ничего плохого в этом не будет и избавитесь от лишней перерисовки.
Надеюсь вы знаете, что во время вызова render в DOM перерисовываются только изменившиеся ноды.
Антон Спирин, знаю, я ориентировался на расширение браузера React. Я так понимаю оно показывает, что происходит сравнение компонентов ( выделяет их цветными рамками ), хотел этого избежать. Или я экономлю на спичках?
Даниил Сугоняев, для одного компонента это экономия на спичках. С другой стороны, если без проблем можно оптимизировать код, не ухудшив при этом читаемость и ремонтопригодность, то почему бы и нет.
Средний
