Cấu trúc của Flux

Một phần của tài liệu Ứng dụng công nghệ node JS và react JS để tối ưu hệ thống quản lý điểm tại trường cao đẳng giao thông vận tải II (Trang 30 - 32)

7. Bố cục luận văn

1.3.2.Cấu trúc của Flux

Mô hình "Flux" được giải thích như sau: khi view kích hoạt một sự kiện, sự kiện này sẽ cập nhật lại model, sau đó model sẽ kích hoạt một sự kiện tương ứng, sau đó view sẽ phản hồi lại sự kiện của model này bằng cách render lại trang với dữ liệu mới nhất. Luồng dữ liệu được chảy theo một chiều dựa vào thiết kế 2 pattern observer tách rời nhau luôn đảm bảo dữ liệu chính xác sẽ được lấy từ model .

Hình 1.6: Sơ đồ chung về quan hệ giữa các thành phần trong Flux

Flux gồm các thành phần cơ bản sau:

- API (Application Programming Interface): là một giao diện mà một hệ thống máy tính hay ứng dụng cung cấp để cho phép các yêu cầu dịch vụ có thể được tạo ra từ các chương trình máy tính khác, cho phép dữ liệu có thể được trao đổi qua lại;

- Action: là nơi đăng ký các hàm sẽ được view gọi đến;

- Dispatcher: là nơi trung chuyển, đóng vai trò truyền các lời gọi từ Action đến với Store. Khi một Action được gọi, Dispatcher sẽ broadcast một event đến với tất cả các Store, với các thông tin về Action Type, hay các data cần thiết;

- Store: là nơi lưu trữ dữ liệu, cũng là nơi có thể thực hiện việc thêm, sửa, xoá dữ liệu. Store sẽ lắng nghe các event được truyền đến từ Action thông qua Dispatcher, kiểm tra xem event đó có thuộc quyền xử lý không, và thực hiện những thay đổi dữ liệu cần thiết, tương ứng với từng event. Sau khi thay đổi dữ liệu, Store sẽ phát ra một event khác, không báo về sự thay đổi;

- View: View lấy dữ liệu được cung cấp bởi Store, và có nhiệm vụ hiển thị những dữ liệu đó. Ngoài ra View lắng nghe event từ Store, mỗi khi Store có sự thay đổi, View tự động được render lại với dữ liệu mới nhất. Khi user tương tác với View và có phát sinh sự thay đổi dữ liệu, View sẽ gọi đến Action cần thiết, để Action thực hiện tiếp nhiệm vụ của mình [11].

Một phần của tài liệu Ứng dụng công nghệ node JS và react JS để tối ưu hệ thống quản lý điểm tại trường cao đẳng giao thông vận tải II (Trang 30 - 32)