Как разделить логику и верстку?

Question

[rshruslan]

Имеется проект на React, в котором я использую хуки, следовательно компоненты - функции, а не классовые.
Как можно разделить логику и верстку?
Раньше, когда еще юзал классовые компоненты, то делал с помощью HOC.

Comments

[rshruslan]

Да, конечно, можно и сейчас с помощью компонентов высшего порядка это все проворачивать, но есть ли вариант получше?

[camelCaseVlad]

покажите данный HOC, хочу понять, о чем речь

[rshruslan]

camelCaseVlad, Обычный HOC, в котором вся логика и, соотвественно, с помощью пропсов передается все в дочерний компонент.
Вариант рабочий, но правильно ли так делать?

[camelCaseVlad]

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

components/
   ButtonComponent/
      ButtonComponentUI.js // html
      ButtonComponentContainer.js // Redux, connect, etc...
      ButtonComponentBusinessLogic.js // логика компонента и тп
      index.js // экспорт

Мне ваше решение нравится.

[rshruslan]

camelCaseVlad, Ну вот так примерно у меня и реализовано :)

[camelCaseVlad]

Мы на работе в предыдущем проекте делали вот так



Однако в конце сошлись на том, что UI и бизнес логику надо было разделять, и делать так, как делаете вы. А не сваливать все в юай.

[rshruslan]

camelCaseVlad, Согласен с вами.

Answer 1

[abberati]

Пишите кастомные хуки, организуйте логику в них. У вас есть useSelector и useDispatch в редаксе.

Хуки позволяют делать ровно то же самое, что позволяют делать хоки, но более компактно и без порождения лишних компонентов-обёрток.

Comments

[rshruslan]

Т.е вы считаете, что лучше все таки в кастомные хуки выносить логику, чем создавать хоки?

[abberati]

rshruslan, да. Потому что хуки — это нативный способ организовать логику, а хоки — костыль, который был придуман от неизбежности.