Đa số chúng ta khi mới làm quen để sử dụng một framework nào đó điều thắc mắc là nên chia cấu trúc thư mục, file như thế nào cho tiện phát triển, cho chuẩn. Với kinh nghiệm của mình thì cơ bản mình thấy có 2 dạng chia là theo ứng dụng và theo modules. Sau đây theo hướng sử dụng reactjs + redux + sagas theo cách chia thư mục cho cả ứng dụng.
Cách bố trí này là mình tham khảo cũng như rút ra được sau một thời gian phát triển ứng dụng trên reactjs. Tất cả thành phần năng điều ở 1 thư mục liên quan cụ thể đến chức năng vai trò của nó cho toàn bộ App reactjs bao gồm: actions, components, container, reducers. Nếu có dùng redux-saga thì thêm thư mục sagas, nếu có dùng reselector thì thêm thư mục reselectors và một số thư mục như constans, helpers .v.v cái này bạn có thể thêm để giúp define sẵn một số cái cần thiết cho ứng dụng của mình.
– actions: Chứa các file actions của redux ví dụ accountActions.js
– components: Chứa các file compoent của react ví dụ list.js, thư mục này chủ yếu liên quan đến việc render html ra trình duyệt.
– config: Để tiện chuyển switch qua lại giữa một số môi trường, các url .v.v. mình hay để 1 thư mục này để config cho nhanh thay vì sửa lại constants.
– constants: Chứa các biến hằng để sử dụng trong app. ví dụ các actions name của redux.
– containers: Tùy theo cách gọi tên của bạn mà có thể đặt nó là pages, hay containers hoặc ko có sử dụng thư mục này mà dùng luôn components cũng được. Mình hay dùng thư mục này để xác định 1 component cha bọc ngoài tất cả các component thành phần bên trong nó. Ví dụ accountContainer.js mình sẽ bọc ngoài cùng của page account, trong này sẽ gọi qua bên component để nhận về các thành phần hiển thị tương ứng, Việc connect redux giữa state và props actions cũng được xác định ở đây, các components con chỉ việc dùng lại từ lớp container này.
– helpers: Thư mục này có thể đổi lại thành ultils hay common gì đó. Vì mục đích thư mục này là define sẵn 1 số function mà app có thể import vào và sử dụng lại. Ví dụ hàm convert ngày tháng, hàm định dạng tiền tệ. .v.v
– reducers: Ứng dụng react+ redux ko thể thiếu reducers được, Vậy nên thư mục này chứa tất cả các file liên quan đến reducer của app.
– routers: Thư mục này để chứa file config tất cả router của app. Thay vì config trực tiếp ở file root.js thì chúng ta define sẵn ở đây, để dễ nhìn và có gì thay đổi cũng tìm nhanh tiện hơn.
– sagas: Nếu có sử dụng redux-saga thì các hàm watch của sagas chúng ta nên liệt kê ở đây. để tiện cho việc tìm kiếm cũng như kế thừa.
– selectors: Thư mục chứa các selectors ( một kiểu select state từ redux dùng module reselect), giúp chúng ta có thể chọn nhanh 1 đối tượng từ state, có thể kế thừa select lồng nhau. chi tiết
Trên đây là struct cơ bản nhất của reactjs mà mình đúc rút, còn liên quan đến công nghệ ở thời điểm đó như thế nào mà cấu trúc có thể thay đổi theo người sử dụng để tiện quản lý cấu trúc của ứng dụng, Ví dụ nếu có sử dụng React Hooks thì cấu trúc sẽ thay đổi, giản lược bớt nhưng chức năng thừa. Ngoài ra ở một số hệ thống lớn, đỏi hỏi tốc độ cũng như tối ưu về mặt chức năng, người ta sẽ chia thành từng bộ các thư mục như thế này ở từng module cụ thể. Ví dụ module account sẽ chứa 1 bộ như vậy, module post cũng vậy. Múc đích là khi ở page của account hệ thống chỉ load và sử dụng những thành phần của account, và ở post cũng vậy. Nó tối ưu hơn về mặt hiệu năng. Nên những hệ thống phức tạp, lớn thường họ sử dụng vậy. Còn những hệ thống đơn giản không quá đồ sộ thì không cần thiết phải chia nhỏ.