Kiến trúc của Flux

Một phần của tài liệu Hệ thống thông tin phòng quản trị thiết bị (Trang 35 - 36)

7 Kết luận và hướng phát triển

3.2 Kiến trúc của Flux

Flux được chia ra các khối thành phần cơ bản như sau :

• • • •

• Action: Làm nhiệm vụ truyền dẫn dữ liệu tới Dispatcher (được coi như các Helper Method)

• Dispatcher: là nơi hận thông tin từ Actions, truyền tải dữ liệu (payload) tới các nơi đã đăng ký nhận thông tin.

• Store: là nơi lưu trữ trạng thái và các logic của hệ thống, đây chính là nơi sẽ đăng ký nhận dữ liệu với Dispatcher.

• Controller Views: là các React Component, làm nhiệm vụ nhận các trạng thái (state) từ Store và truyền dữ liệu (dưới dạng props) cho các thành phần con.

Nguyên lý hoạt động:

• Views là thành phần làm nhiệm vụ hiển thị nội dung ứng dụng.

• Khi người dùng tương tác với ứng dụng làm thay đổi trạng thái (state) của ứng dụng (VD: thêm, sửa, xóa dữ liệu cá nhân), View sẽ thông qua Action gửi các thông tin thay đổi tới Dispatcher.

• Sau khi nhận được thông tin từ Action, Dispatcher làm nhiệm vụ truyền tải (broadcast) nội dung nhận được tới các Store đăng ký lắng nghe sự kiện thay đổi từ trước đó.

• Store sau khi nhận thông tin, tiến hành cập nhật dữ liệu (có thể hiểu việc cập nhật dữ liệu ở đây giống việc cập nhật state của Component).

• Sau khi cập nhật, Store bắn sự kiện xuống View để tiến hành cập nhật hiển thị cho người dùng.

3.3.2.4 Redux

Redux là một thư viện Javascript giúp tạo thành một lớp quản lý trạng thái của ứng dụng. Redux giúp chúng ta có thể viết những ứng dụng có các luồng xử lí nhất quán, chạy trên nhiều môi trường khác nhau (client, server, native) và dễ dàng kiểm thử

Kiến trúc:

Một phần của tài liệu Hệ thống thông tin phòng quản trị thiết bị (Trang 35 - 36)

Tải bản đầy đủ (PDF)

(195 trang)