Как реализовать адекватную структуру React приложения?

Question

[gomerIT]

Изучаю React и столкнулся с задачей создания структуры приложения. Почитал некоторые статьи и советуют распределять логику на умные и презентационные компоненты. Сейчас для себя сделал такую архитектуру. Подскажите, то что я сделал это нормально?
- api (Здесь будут апи запросы на сервер)
- actions (Экшены)
- components (презентационные компоненты кнопки, формы, меню - все что имеет отношение к отображению)
- containers (умные компоненты - обвертка глупых компонентов например:
Презентационный компонент:

function ContactForm() {
 return (
   <form className="contact-form >
       <ContactFormInput />
       <ContactFormInput />
       <ContactFormButton />
   </form>
 );
}

Умный компонент

function Contact() {
 return (
   <ContactForm />
  );
}

- store.js (Хранилище стэйтов использую react-easy-state)

Comments

[G F]

Мне нравится ducks pattern когда группируешь по фичам

Answer 1

[Виктор Дубров]

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