Ответы пользователя по тегу React
  • ReactJS Где хранить state статуса модального окна(Как правильно, чтобы не был говнокод)?

    Хорошо, что вы задались этим вопросом!Вы думаете в верном направлении.
    Начнем с того, что держать state в main компоненте, плохая практика, при его изменении будет происходить перерендер всех дочерних компонентов по умолчанию и вам придется подтирать за собой - сравнивая пропсы,
    там где это не нужно и где вы даже ничего не принимаете (например в любых контейнерах).
    Для этого есть store, той самой flux архитектуры которой вы пользуетесь. С этим мы поняли, да.

    Далее нужно определиться, что вообще у вас за модальное окно?

    Если оно у вас по типу - что-бы что-то сделать в приложении зарегистрируйтесь, и вылетает модалка , куда бы не нажали. То переиспользовать его уже становится бессмысленным, оно должно быть одно на верхнем уровне, так как это уже глобальное представление, а не плодить кучу в каждом компоненте, где есть обработка любых событий связанных с функционалом приложения напрямую. Тем более что ваш компонент, в таком случае с филосовской точки зрения , ничего не знает ни про какие модальные окна и знать не хочет, он отвечает за представление самого-себя любимого.
    Поэтому вы решаете засунуть в store - reducer modalWindow с значением - show : false/true и диспачите экшен из любого компонента если нужно показывать/скрывать его.
    Повторюсь в данном кейсе модальное окно ОДНО логически их не может быть куча, тем более, что конкретно к компонентам оно никакого отношения не имеет.

    Если оно имеет прямое отношение к вашему компоненту вы хотите и можете его переиспользовать, меняя текст и прочую чепуху, прокидывая true/false и callback через пропсы, храня их в состоянии компонента, к которому это все относится. Но чаще всего это даже не модальные окна, а подсказки которые показывают дополнительную информацию, связанную с компонентом.

    Если это алерты по типу - success, warning, error, которые вылетают где-то внизу (например ) в углу,
    Вы могли бы их также переиспользовать, до момента пока пользователь не нажмет сразу же на эту/другую кнопку и не получит новое сообщение до того как пропало прежнее, и тут вам снова нужно выносить список алертов, которые в настоящее время активны в store, и складывать их в список в том же углу, удаляя и добавляя их, чтобы пользователь успевал читать, что именно ему "кричат".

    Всегда думайте , нужно ли то что я пишу здесь, или может оно должно быть в другом месте.
    С одной стороны создается впечатление, что создав state в main компоненте вы облегчите долю приложения, вместо того чтобы создавать лишний reducer, но как показывает практика это не так.
    Ответ написан
    Комментировать
  • Как реализовать адекватную структуру React приложения?

    Да, вполне. Для такого приложения больше и не нужно.
    Но делить компоненты на умные и презентационные , так себе идея, на каждого умного найдется умнее, в данном контексте , у каждого родителя по отношению к дочернему компоненту, будет свой родитель.
    Если вы также подразумеваете под "умным компонентом" тот где будет вся логика большого компонента , родителя - умного компонента и его детей. То лучше логику писать так где она уместна - на месте , не отходя от кассы)
    И стараться меньше передавать по пропсам данные , где этого можно избегать избегайте, дабы не захламлять логику движения данных.
    В вашем примере на роль умного компонента больше подходит компонент ContactForm, в котором и будет вся возможная логика - обработка импутов и тд, а на роль презентационных - инпуты. А в компоненте Contact, если больше ничего не будет, его можно просто убрать, а если вам нужна обертка для оберните ее просто в div и все.
    Удачи в изучении)
    Ответ написан
    Комментировать