Cấu trúc dự án Fractal với React và Redux - ưu/nhược điểm

Question

Tôi muốn biết những ưu và nhược điểm của việc sử dụng Cấu trúc Fractal trong dự án React + Redux và tôi đã tự hỏi là có ai có kinh nghiệm với phương pháp này không hoặc nếu có những cạm bẫy không thể nhìn thấy ngay từ tài liệu.

(cấu trúc Fractal) Còn được gọi là: Tự Đựng Apps, Recursive Route Hierarchy, nhà cung cấp, vv

Bối cảnh: Tôi nhìn vào react-redux-starter-kit và nó cho thấy sử dụng một fractal structure để sắp xếp các thư mục. Nếu tôi hiểu rõ, phương pháp này yêu cầu tổ chức các thư mục dự án theo tính năng và lồng đường định tuyến.

Vì vậy, nếu tôi có một "sự kiện" tài nguyên nơi

• /events liệt kê tất cả các sự kiện
• /events/new hiển thị một hình thức để chèn một sự kiện mới
• /events/1/details hiển thị các thông tin chi tiết về sự kiện với id 1

Bắt đầu từ bản mẫu, tôi phải thêm thư mục tuyến mới như:

├── 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 
~ 

Với New và Details thư mục lồng nhau dưới gốc Event thư mục.

Các tài liệu nổi bật này ưu chính:

• Nó quy mô tốt hơn so với một cấu trúc thư mục bằng phẳng, với các thư mục cho linh kiện, container vv
• Tuyến đường có thể được đóng gói thành "khối" sử dụng thuật toán tách và hợp nhất của webpack
• Vì logic là khép kín, các tuyến đường có thể dễ dàng được chia thành các kho riêng biệt và được tham chiếu với plugin DLL của webpack để linh hoạt, phát triển hiệu suất cao d khả năng mở rộng.

Answer 1

Một hạn chế hoặc con tôi đã gặp phải với cấu trúc tương tự là nếu/khi mọi thứ bắt đầu được sử dụng bên ngoài phân cấp, thì bạn phải sử dụng rất nhiều ../../.. trong hàng nhập của mình.

Ví dụ: giả sử bạn nhận được yêu cầu trên tuyến đường StartPage, bạn sẽ hiển thị chi tiết cho sự kiện gần đây nhất.

vì vậy bây giờ nó trông giống như:

routes 
├─Events 
│  ├─New 
│  ├─Details 
├─StartPage 
     ├─ components // here somewhere you import ../../Events/Details 

Đó không phải là ngày tận thế, nhưng hệ thống phân cấp tốt đẹp của bạn không phải là khá nghiêm ngặt theo cấp bậc nữa.

Answer 2

Một nhược điểm mà tôi có thể nói là không thể at a glance xem tất cả các tuyến đường có sẵn và các thành phần tương ứng của chúng, điều này có thể được giảm thiểu bằng cách đưa ra một số nhận xét mô tả, nhưng nó làm tăng độ phức tạp của cấu hình tuyến đường của bạn. Tôi cũng sẽ cố gắng giữ các thư mục lồng nhau ở mức tối thiểu vì có tải nhận thức liên quan đến việc nhận được các mức lồng nhau trong các câu lệnh nhập của bạn tức là ../../../../../ chúng có thể bị mất nếu bạn có nhiều tuyến lồng nhau.