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: