Каков наилучший способ структурирования большого проекта сокращения?

Question

Недавно я начал использовать Redux, и до сих пор все прошло довольно хорошо. Однако по мере того, как мое приложение растет, я начинаю сомневаться в том, какие лучшие методы для его структуры. Большинство учебников и документации дают вам очень маленькие примеры, поэтому я не уверен, в каком направлении я должен это принять.

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

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

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

- module1 
    - actions 
    - reducers 
    - containers 
    - components 

- module2 
    - actions 
    - reducers 
    - containers 
    - components 
    ... 

И очевидно, что они получают все вместе взятые на основной App файл, где все они разбиты.

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

- actions 
    -module1Actions 
    -module2Actions 
- reducers 
    -module1Reducers 
    -module2Reducers 
- containers 
    -module1Containers 
    -module2Containers 
- components 
    -module1Components 
    -module2Components 

Может кто-нибудь пролить некоторый свет на то, что было бы лучший подход?

Answer 1

Существует ряд подходов к структуре приложений React/Redux. Также было много экспериментов с методами улучшения инкапсуляции логики и фрагментов функциональности. Одним из компромиссов для Redux является то, что глобальное состояние упрощает работу на уровне приложения, но инкапсуляция может быть сложнее.

My my React/Redux links list имеет пару категорий с соответствующей информацией. У меня есть раздел со статьями по React/Redux project structure. Существует также ряд статей и попыток кода, которые пытаются решить проблему «полностью инкапсулированного и многоразового фрагмента логики». У меня есть ссылки на эти статьи и обсуждения в разделе Redux Techniques#Encapsulation.

На полузависимой ноте есть целая куча библиотек, которые пытаются помочь решить концепцию «для каждого компонента в Redux». Большинство из них в основном настраивают срез верхнего уровня вашего состояния и хранят данные компонента, введенные с помощью идентификатора, и имеют способы генерации идентификаторов для компонентов. У меня есть список их в моем Redux addons catalog, на странице Component State. Я еще не пробовал никого из них сам, просто каталогизировал их.

И, наконец, Redux FAQ имеет соответствующую информацию по этой теме, по адресу http://redux.js.org/docs/faq/CodeStructure.html#structure-file-structure.

Answer 2

Да, ваш подход абсолютно правильный - и много кода шаблона (что довольно сложно избежать) - это всего лишь функция Redux, а не ошибка. Итак, в идиоматическом приложении много модулей, как и у вас.

К сожалению, его очень сложно унифицировать, потому что редукторы довольно уникальны из проекта для проекта, поэтому я не знаю успешной и популярной реализации. Существует библиотека mobX, которая устраняет состояние слияния (потому что вы можете просто мутировать данные там), но похоже, что это работает только в небольших проектах.

Итак, единственный совет из моего собственного опыта, который я могу дать вам, чтобы написать модулей завода, который будет производить действия, редукторы и селекторы, и если у вас есть аналогичные структуры в конечных точках, когда она будет уменьшаться много шаблонов. Но уникальные вещи (например, логин, например) в принципе невозможно обобщить.