Home » React JS » Flux in reactjs with CRUD Example (Part-1)

Flux in reactjs with CRUD Example (Part-1)

Để tiếp tục loạt bài viết về reactjs mình xin chia sẻ tiếp về việc sử dụng flux trong dự án reactjs. Để dễ hiểu mình sẽ sử dụng một ví dụ nhỏ về CRUD để mọi người cùng tham khảo.
Đối với các bạn mới để hiểu rõ hơn về reactjs các bạn có thể tham khảo các bài viết đã được post trong blog này như:
1. Flux – Xương sống của Facebook React
2. Giới thiệu chung về React JS
3. React Component Lifecycle
4. Hello word with react

Quay về với chủ đề chính. Để sử dụng được flux trong dự án đầu tiên điểu cần cài đặt flux và bố cục dự án theo mô hình của nó. Nào cùng bắt đầu nhé.
Việc đầu tien bạn hãy tạo thư mục src bạn tạo các folder như sau:


Trong file GulpFile.js bạn tạo nội dung như sau


Chắc một số bạn sẽ thắc mặc file này dùng để làm gì. Nói một cách đơn giản file này sẽ giúp chúng ta compile tất cả nội dùng file viết bằng jsx dưới dang ES6 thành file js min để tại thư mục build/min. Để hiểu rõ hơn các bạn có thể tìm hiểu thêm tại bài viết Gulp là gì?

Tiếp the tới file package.json


Với cầu hình như trên sau khi chạy npm install thì tất cả các file cài đặt cần thiết sử dụng trong ví dụ này sẽ được cài đặt.

Tiếp theo là fIle index.html


Cuối cùng cũng đã xong phần setup. Bây giờ vào nội dung chính.

Bài 1: Create user.


Để bắt đầu bài này bạn hãy tạo một form có 2 trường giá trị là name và sex nhé.
Tạo như thế nào nhỉ? rất đơn giản. Hãy tạo trong thư mục components 1 class CreateUserComponent nhé.


Tiếp tục là file app.jsx


nào bây giờ hãy chạy dòng lệnh


và mở file index.html lên. Rất dễ để nhận ra là chúng ta đã có một form thông tin điền tên và chọn giời tính. Nhưng thử thao tác xem các bạn có nhận ra điểu gì lạ không?

Rất dễ nhận thấy rằng việc input vào ô name và khi chọn giới tính cũng không thấy mục name và giới tính in ra phía dưới có thay đổi. Tại sao vậy? Lý do đơn giản là chúng ta chưa thể gán được giá trị từ ô input vào stage của react. Để thực hiện việc đó có rất nhiều cách. Các bạn có thể tham khảo thêm tại Two-Way Binding Helpers .

Bây giờ sửa lại một ít nhé


Build lại rồi xem sự khác biệt. Bây giờ mọi hành động vào các ô input giá trị để được add vào giá trị stage rồi.

Tiếp theo chúng ta sẽ add thêm action cho nut save. Action này sẽ hoạt động như sau:

Theo flux Khi click vào button save sẽ gọi đến một action trong layer actions. Layer action sau khi tương tác với api,.. sẽ tiếp tục gọi đến layer Dispatcher. Từ đây các request sẽ được gửi đến các store trong layer stores. Các store sẽ “nghe ngóng” các action được gửi đến để từ đó quyết định hành dộng nào thực hiện. Cuối cùng sẽ gửi tín hiệu cho view layer.

Trong folder Dispatchers ta tạo một file Dispatcher.jsx với nội dung như sau


OK đã xong! “Cái quái gì đây? thế thôi à?”. Tuy trông rất đơn giản nhưng nó lại là thành phần không thể thiếu được trong mô hình này.

Bây giờ tới actions layer thôi.

Tại folder actions chúng ta sẽ tạo ra file UserActions.jsx


Tại stores sẽ lắng nghe các event từ dispatcher. vì thế cúng ta sẽ tạo ra một file base chứa các action chung của lớp này như sau:
BaseStore.jsx


Tiếp theo là UserStore.jsx


Cuối cùng là add action vào nút save và thêm action “lắng nghe” UserStore khi khởi tại CreateUserComponent nữa là ok.
Ta sửa lại code của CreateUserComponent như sau


Cuối cùng cũng tới lúc tận hưởng thành quả. Bây giờ hãy build lại và tận hưởng(Nhớ mở console lên nhé).

OK hôm nay chúng ta kết thúc phần 1 ở đây. Bài sau sẽ cùng nhau làm phần list, delete và sử dụng thêm cả router nữa nhé.