具有React和Redux的分形项目结构 - 优点/缺点

Question

我想知道在React + Redux项目中使用Fractal Structure的优缺点是什么,我想知道是否有人对这种方法有任何经验,或者是否存在从文档中无法立即看到的陷阱.

(分形结构)也称为:自包含应用程序,递归路由层次结构,提供程序等

上下文:我正在查看react-redux-starter-kit,它建议使用分形结构来组织文件夹.如果我理解得很好,这种方法需要按功能组织项目文件夹并递归地嵌套路由.

所以,如果我有一个"事件"资源在哪里

• /events 列出所有事件
• /events/new 显示一个表单以插入新事件
• /events/1/details 显示有关id为1的事件的详细信息

从样板文件开始,我必须添加新的路径文件夹,如:

??? src                      # Application source code
?   ??? main.js              # Application bootstrap and rendering
?   ??? components           # Reusable Presentational Components
?   ??? containers           # Reusable Container Components
?   ??? layouts              # Components that dictate major page structure
?   ??? static               # Static assets (not imported anywhere in source code)
?   ??? styles               # Application-wide styles (generally settings)
?   ??? store                # Redux-specific pieces
?   ??? routes               # Main route definitions and async split points
?       ??? index.js         # Bootstrap main application routes with store
?       ??? Root.js          # Wrapper component for context-aware providers
~       ~
?       ??? Events           # Fractal route
?       ?   ??? index.js     # Route definitions and async split points
?       ?   ??? components   # Presentational React Components
?       ?   ??? container    # Connect components to actions and store
?       ?   ??? modules      # Collections of reducers/constants/actions or single DUCK module
?       ?   ??? routes       # Fractal sub-routes (** optional) <-------------
?       ?       ?
?       ?       ??? New
?       ?       ?   ??? index.js     # Route definitions and async split points
?       ?       ?   ??? assets       # Assets required to render components
?       ?       ?   ??? components   # Presentational React Components
?       ?       ?   ??? container    # Connect components to actions and store
?       ?       ?   ??? modules      # Collections of reducers/constants/actions or single DUCK module
?       ?       ?   ??? routes       # Fractal sub-routes (** optional) <-------------
?       ?       ?
?       ?       ??? Details
?       ?           ??? index.js     # Route definitions and async split points
?       ?           ??? assets       # Assets required to render components
?       ?           ??? components   # Presentational React Components
?       ?           ??? container    # Connect components to actions and store
?       ?           ??? modules      # Collections of reducers/constants/actions or single DUCK module
?       ?           ??? routes       # Fractal sub-routes (** optional) <-------------
~       ~
?       ??? NotFound         # Capture unknown routes in component
~

用New和Details文件夹嵌套在根Event文件夹下.

文档突出了这个主要优点:

• 它比平面目录结构更好地扩展,包含组件,容器等的文件夹.
• 可以使用webpack的代码拆分和合并算法将路由捆绑到"块"中
• 由于逻辑是自包含的,因此可以轻松地将路由分解为单独的存储库,并使用webpack的DLL插件进行引用,以实现灵活,高性能的开发和可伸缩性.

Answer 1

我在类似结构中遇到的一个缺点或问题是,当事物开始在它的层次结构之外使用时,你必须../../..在你的导入中使用大量的东西.

例如,假设您要求在StartPage路由上显示最近事件的详细信息.

所以现在它看起来像:

routes
??Events
?     ??New
?     ??Details
??StartPage
       ?? components   // here somewhere you import ../../Events/Details

这不是世界末日,但你的好层次结构不再是严格的等级.