Bài 6: Quản lý state với Cubit
Trong series Demo cơ bản này, mình đã giới thiệu và demo các phần như UI, Quản lý state cơ bản, điều hướng và truyền dữ liệu, networking. Còn 1 phần mình muốn giới thiệu nữa đó chính là quản lý state với Bloc Cubit.
I.Tại sao cần quản lý state theo cách nâng cao hơn?
Rõ ràng ở trang HomeScreen, chúng ta chỉ sử dụng setState cơ bản, giao diện vẫn đủ đáp ứng. Vậy tại sao cần phải quản lý state theo 1 cách khác?
Nhìn vào việc quản lý state ở màn HomeScreen chúng ta có thể nhận thấy: Toàn bộ logic xử lý, và giao diện đều trong cùng 1 class, cấu trúc như vậy rõ ràng là ko sạch đúng không. Việc chỉ sử dụng setState chúng ta hoàn toàn có thể xây dựng được mọi ứng dụng, nhưng logic cho các ứng dụng thì đa phần rất phức tạp, nên nếu có thể tách biệt giữa logic và hiển thị, rõ ràng cấu trúc lúc đó sẽ rất sạch. Bloc cubit sẽ giúp chúng ta đáp ứng được việc đó, toàn bộ logic xử lý dữ liệu lúc này đều được đẩy về cho Cubit xử lý và cập nhật lại state, HomeScreen chỉ việc thực hiện vẽ giao diện tương ứng với state.
II.Tiến hành refactor lại HomeScreen
Add lib https://pub.dev/packages/flutter_bloc và https://pub.dev/packages/bloc
Tiến hành tách các class theo mô hình trên ta có
1.State
HomeState thể hiện cho Data là class chứa các state của màn home, tất cả các state của màn home chúng ta sẽ thêm ở đây.
2.Cubit
HomeCubit sẽ chứa tất cả các logic của HomeScreen, tiến hành chuyển đổi phần logic lấy danh sách câu hỏi sang cubit chúng ta có:
3.UI
Dữ liệu và Logic cho giao diện đã đủ, giờ update nốt màn HomeScreen để kết nối nào
Ở trên chúng ta có
- BlocProvider: Đây là Widget cung cấp 1 instance của Bloc cho các Widget con chứa trong nó
- BlocBuilder: là Widget dùng để xây dựng UI dựa trên state của Bloc, khi state thay đổi BlocBuilder sẽ tái xây dựng UI để phản ánh trạng thái mới
- HomeCubit()..getListQuestion(): Cubit được khởi tạo và gọi vào hàm getListQuestion 1 lần duy nhất để lấy về danh sách câu hỏi.
III.Tổng kết
Như vậy là các class đã được tách biệt hoàn toàn: HomeScreen chỉ chứa UI. HomeCubit xử lý các Logic và update lại HomeState. Nhưng có 1 điều nhỏ mà mình chưa được hài lòng, đó là ở hàm copyWith trong HomeState. Với những ứng dụng lớn hơn, chứa nhiều trạng thái, thì hàm copyWith sẽ rất lớn, và dev sẽ nhận thấy việc các dòng code bị lặp rất nhiều. Nhưng các bạn yên tâm, chúng đều có cách để xử lý, đó chính là việc tự động generate code với freezed mà mình có giới thiệu ở series Base Flutter.
Trong suốt series mình đã triển khai thực tế 1 màn hình nhỏ, phần còn lại nhờ các bạn tiếp tục tự triển khai để có thể hoàn thiện được ứng dụng. Ở series này, mình chỉ tập trung vào giải quyết các vấn đề chính đủ để cho các bạn newbie hiểu và có thể tiếp tục tự triển khai tiếp.
Cảm ơn các bạn