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

Flux in reactjs with CRUD Example (Part-2)

Tiếp tục part 1 part 2 này chúng ta sẽ làm tiếp các phần như là:
1. List (Danh sách các user đã đang ký)
2. edit thông tin user
3. delete user
4. sử dụng router

Bây giờ chúng ta sẽ làm phần List trước nhé.
Tại thư mục components các bạn tạo 1 component với tên là ListUserComponent tương tự như CreateUserComponents


Như các bạn thấy ở trên component này vẫn sẽ “nghe ngóng” từ UserStore. Khi có event change sẽ lập tức gọi hành động _onChange() để lấy lại giá trị stage.

Trong đoạn code này bạn còn thấy chúng ta sẽ sử dụng form tạo mới user để ngay dưới list các user vừa tạo. Việc này thực hiện rất đơn giản vì chúng ta đã có sẵn CreateUserComponent rồi, khi muốn sủ dụng ta chỉ cần khai báo là được.

Chúng ta cũng thay đổi file app.jsx một chút


Thay vì sử dụng CreateUserComponent như bài trước, bài nay chúng ta dùng ListUserComponent.
Build lại hệ thống và chạy lại xem nào.

Bây giờ cữ mỗi lần add thêm 1 user thì lập tức danh sách user cũng đã được thay đổi theo rồi.

Tiếp theo là hành động delete. Với hành động này chúng ta cần làm nhưng việc sau:
1. Them button delete. => cần sửa ở ListUserComponet
2. Click button gửi action delete => cần đăng ký them event delete ở action
3. Xóa user, gửi action xóa thành công => cần sử lại store

Sau khi sửa xong chúng ta sẽ được như sau
1, ListUserComponet


2, UserAction


3, UserStore


ở đây chúng ta đã đăng ký thêm một hành động là ‘DELETE_USER’. Cứ mỗi khi phát hiện ra event này thì UserStore sẽ xóa đi 1 user trong biến listData với key đã được truyền vào.

Build và thử lại trên màn hình nhé. Sau khi click nút delete user sẽ được xóa luôn khỏi list trên màn hình.

như vậy phần delete đã xong bây giời chúng ta sẽ làm tiếp phần edit. Để áp dụng đươc phần router chúng ta sẽ làm trang edit riêng nhé.

Ở đây các bạn có thể thấy rằng chúng ta sẽ sử dụng thêm thư viên react-router.

Đầu tiên để setup router ta sửa lại file app.jsx như sau:


EditUserComponent.jsx


để lấy được param truyền vào từ router ta sử dụng dòng lệnh sau: this.props.params.id;

Bây giờ là action. Ta sẽ đăng ký thêm một action edit nữa


UserStore cũng sửa 1 ít


Ok thế là xong rồi. Bây giờ build lại và và chạy xem nào.

Lỗi đúng không? Bởi vì việc dùng router nên chúng ta sẽ không thể view trước tiếp từ file html nữa. bạn hãy chạy dòng lệnh


rồi sau đó vào localhost:3000 nhé.

Tới đây thì mọi chuyện ổn rồi. Sau khi click vào button edit chúng ta sẽ sang được trang edit và tất cả các thông tin của user sẽ được hiện ra đầy đủ. Bạn thử edit rồi quay về trang home xem kết quả nhé. Mọi nội dung chúng ta edit đểu đã được apply.

Tới đây chúng ta đã kết thúc chuỗi bài viết CRUD sử dung react js va flux. Hẹn gặp lại các bạn vào các bài viết khác.