[Flutter] Tổng quan về cách triển khai Bloc pattern trong project

[Flutter] Tổng quan về cách triển khai Bloc pattern trong project

  • Architecture

Thường thường mình làm bloc pattern, với 3 layers sau:
– Presentation (UI)
– Business Logic (Bloc)
– Data (Repository)

package: https://pub.dev/packages/flutter_bloc
Mình sẽ đi giải thích về từng tầng như sau, bắt đầu từ lowest level layer trước nhé.

1. Data (Repository)

Tầng này sẽ làm nhiệm vụ gì?
Trả lời ngắn gọn, dễ hiểu, nó sẽ call api, hay lưu localstoreage, sql lite. Y sẽ làm việc trực tiếp với data.

2. Business Logic (Bloc)

Nhiệm vụ của ông này là lắng nghe UI, thực hiện nghiệm vụ (business) và làm việc với dữ liệu qua Repository, ở đây có thể sử dụng nhiều Repository.

Trên tầng UI communicate với Bloc qua Event, Anh Bloc này sẽ lắng nghe Event, và thực hiện Business.

Như ví dụ ở trên, Bloc nhận event=TodosLoaded, hiểu đây là lệnh lấy dữ liệu.
Anh ta bắt đầu truy cập vào Repository (todosRepository) để lấy dữ liệu từ method loadTodos()
Sau khi lấy xong, nhận thấy không có lỗi. Anh ta bắn state=TodosLoadSuccess để tầng UI hứng 😀
còn nếu nhận thấy có lỗi, Anh ta sẽ bắn một state khác là TodosLoadFailure, UI sẽ hứng và show lỗi ra màn hình cho người dùng.

Bloc-to-Bloc communication như thế nào?

Các bloc có thể phụ thuộc vào nhau, dựa vào sự thay đổi của state để làm việc.

Ở ví dụ trên ta thấy, MyBloc sẽ hoạt động phụ thuộc vào sự thay đổi của OtherBloc
MyBloc sẽ lắng nghe sự thay đổi state trong OtherBloc để hoạt động.

3. Presentation (UI)

Anh này sẽ gửi yêu cầu thông qua Event cho Bloc, để Bloc xử lý nghiệp vụ, sau đó sẽ nhận lại kết quả thông qua State mà Bloc response về.

Như ví dụ trên, UI sẽ gửi yêu cầu thông qua event=TodosLoaded()

Như vậy là xong,

Tips: bạn nào dùng Visual Studio Code thì sử dụng extension FelixAngelov.bloc sau để generate ra cấu trúc của Bloc, gồm 3 file: _bloc, _event, _state
cũng bớt được time tạo mấy file đó 😀
link extension: https://marketplace.visualstudio.com/items?itemName=FelixAngelov.bloc

CHÚC MỌI NGƯỜI THÀNH CÔNG!

Post a comment

Your email address will not be published.