Cách đây vài năm, lần đâu tiên mình tiếp xúc với ReactJS, mình đã bị nó mê hoặc 😀 (chém), sau một tuần tìm hiểu trên các diễn đàn, các groups, các tutorials của các pro mình biết đến Redux http://redux.js.org/  với 1 example huyền thoại TODO list, sau khi đọc và làm theo từng bước, từng bước và cảm thấy có vẻ như mình đã nắm đc tất cả tinh tuý của reactjs,  redux mình bắt đầu build một dự án HelloWorld cũng huyền thoại không kém để demo, đúc kết lại những gì mình đã học, đã tìm hiểu về công nghệ mới này.

Đầu tiên về cấu trúc thư mục code, mình đã sử dụng structure như dưới đây (demo bằng react native)

Ngon, nhìn có vẻ sáng sủa, các files Component, Container, Store, Action, Constant, blah blah được đặt ở các folders riêng lẻ, tạo xong structure này mình cảm thấy tâm huyết vô cùng 😀 😀 :D. Dự định mình sẽ dùng structure này để làm project base kiểu như một boilerblate để reuse lại cho những dự án sau này. Nhưng đời không như là mơ 😀 :D, sau một thời gian phát triển sản phẩm với hàng trăm chức năng. Cấu trúc code ở trên đã bộc lộ quá nhiều điểm yếu, cả trong việc tạo mới và bảo trì chức năng. Một số vấn đề nổi cộm

1. Khi cần tạo chức năng mới
   1. Các file action, component, constant reducer bị phân tán ra các folder tương ứng, mỗi folder chứa hàng chục thậm trí hàng trăm files
   2. Không dễ gì để biết được những function mình định viết đã có dev nào trước đây viết chưa
   3. nhiều bất cập khác
2. Khi cần maintenance một chức năng cũ
   1. Một chức năng đảm nhận quá nhiều vai trò
   2. Các hàm dùng chung chồng chéo nhau
   3. Một file bị viết tập trung quá nhiều thứ, dùng chung cho rất nhiều features, độ dài vài trăm thậm trí đến cả nghìn dòng 😀
   4. Nhiều bất cập khác 😀

Dưới đây là structure code mới, dễ dàng mở rộng và bảo trì hơn so với cấu trúc trên

Như các bạn thấy, tất cả các thành phần của react-redux từ action, component, reducer … mình nhét hết vào một folder  đặt tên theo feature và viết tách biệt hoàn toàn, không phục thuộc vào feature khác để dễ quản lý, không bị phụ thuộc vào feature khác, sau này developer muốn chỉnh sửa, hoặc xoá bỏ chỉ việc thao tác trong folder này, không sợ bị ảnh hưởng đến những thằng khác 😀

Mỗi structure trên đều có điểm mạnh điểm yếu riêng của nó. Structure đầu tiên phù hợp với dự án nhỏ khoảng 20 screens đổ lại. Structure thứ hai phù hợp với dự án lớn đến siêu lớn.

Có rất nhiều structure code và hiệu quả khác nhau, nếu bạn biết hoặc đang làm dự án react, redux với code structure tốt hơn, vui lòng chia sẻ kinh nghiệm, ý kiến của bạn. Nếu thấy bài viết này hay hãy like, share và subscribe nhé 😀

Nguồn tham khảo: https://medium.com/dailyjs/11-mistakes-ive-made-during-react-native-redux-app-development-8544e2be9a9

Please follow and like us: