我想知道在React + Redux项目中使用Fractal Structure的优缺点是什么,我想知道是否有人有这种方法的经验,或者是否有从文档中无法立即看到的陷阱。
(分形结构)也称为:自包含应用程序、递归路由层次结构、提供者等
上下文:我正在研究react-redux-starter-kit,它建议使用fractal structure来组织文件夹。如果我理解得很好,这种方法需要按功能组织项目文件夹,并递归嵌套路线。
所以,如果我有一个"events“资源,
/events
列出所有events/events/new
显示用于插入新event/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
文件夹下。
文档强调了这一主要优点:
发布于 2016-07-01 16:13:17
我在类似的结构中遇到的一个缺点或缺点是,如果/当事物开始在层次结构之外使用时,您必须在导入中使用大量的../../..
。
例如,假设您得到了在StartPage路由上应该显示最近事件的详细信息的要求。
所以现在看起来是这样的:
routes
├─Events
│ ├─New
│ ├─Details
├─StartPage
├─ components // here somewhere you import ../../Events/Details
这不是世界末日,但您的良好层次结构不再是严格的层次结构。
发布于 2016-07-07 16:36:55
我可以说的一个缺点是无法at a glance
查看所有可用路由及其各自的组件,这可以通过一些描述性注释来缓解,但它确实增加了路由配置的复杂性。我还会尽量将嵌套文件夹保持在最低限度,因为在导入语句中获得正确的嵌套级别会带来认知负载,即../../../../../
,如果有许多嵌套的路由,这些可能会变得无法控制。
https://stackoverflow.com/questions/38130434
复制相似问题