Структура файлов со стилизованным компонентом и CRUD

Question

Я хочу иметь структуру файлов по функциям.Но я использую Styled Component , и у меня много файлов.Например, в моем каталоге project, который является объектом моего приложения, у меня есть:

Projects.js ProjectList.js ProjectCreate.js ProjectShow.js Card.js CardHeader.js CardBody.js CardFooter.jsTasksCounter.js ProjectDescription.js CardAdd.js ProjectDelete.js actions.js reducer.js saga.js constants.js

У меня могло быть больше файлов, но мои страницы все еще находятся в стадии разработки, поэтому я мог бы добавить еще несколько позже.Должен ли я снова разделить эти файлы?Например, чтобы подкаталоги типа Projects ProjectCreate ProjectShow помещали общие файлы в корневой каталог project и конкретные файлы в эти три?

project
|_Projects
     |_index.js
     |_ProjectList.js
     |_Card.js
     |_CardHeader.js
     |_CardBody.js
     |_CardFooter.js
     |_TasksCounter.js
     |_ProjectDescription.js
     |_CardAdd.js
     |_actions.js
     |_reducer.js
     |_saga.js
|_ProjectCreate
     |_index.js
     |_Form.js
     |_actions.js
     |_reducer.js
     |_saga.js
|_ProjectShow
     |_index.js
     |_ProjectHeader.js
     |_ProjectContent.js
     |_actions.js
     |_reducer.js
     |_saga.js

Я видел много разных подходов в более чем дюжине учебных пособий, но примеры всегда очень просты с парой функций.

Возможно, лучшее решение, используя Ducks и поместите все Styled Components в один файл?

Answer 1

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

views
 - Cards
   - index.js
   - module.js
   - test.js
   - styles.js
 - Button
 - InputFields
 - ...
 - ...

Внутри каждого представления обратите внимание на наличие index.js, в котором есть компонент реакции.module.js будет содержать редукторы и действия, если таковые имеются.test.js будет иметь тесты только для этого компонента и, наконец, styles.js или styles.css/scss будут иметь стили