Sử dụng Bloc trong Flutter để quản lý State

Tram Ho

Bloc là một lib để quản lý state cho Flutter application. B.L.o.C nghĩa là Business Logic Component. Nhận ‘Event’ như là input và trả về output là ‘State’. Bloc được xây dựng dựa trên RxDart.

Chúng ta có thể chia Flutter application architecture thành 3 lớp sau:

  1. Biển diễn của View Layer.
  2. Bloc
  3. Data Layer

Vậy có nghĩa là Bloc đứng giữa 2 lớp View và Data.

1. Data Layer

Có nhiệm vụ cung cấp data từ bất kể nguồn nào. Data Provider cung cấp data tho và repository sẽ là trình đóng gói một hoặc nhiều data providers.

2. Bloc hay Business Logic

Có nhiệm vụ nhận event từ lớp biểu diễn và trả về state mới. Hoạt động như một cầu nối giữa lớp data và lớp presentation.

3. Presentation Layer

Có nhiệm vụ render chính nó dựa trên một hoặc nhiều state của bloc. Nó cũng xử lý các sự kiện input của user và lifecycle event của application.

Một số concept cho Bloc

1. Events

Event được truyền vào một Bloc. Nó giống như concept action trong Redux. Trong lớp presentation, event được tạo ra bởi tương tác của user như button click và truyền vào Bloc. Một event có thể bao gồm vài data được thêm vào.

2. States

State là một phần của application state. Nó là output của Bloc. Khi state thay đổi, thành phần UI sẽ được thông báo và dựa vào current state, nó sẽ tự render lại.

Transition

Thay đổi từ một state sang state khác gọi là transition. Nó bao gồm current state, event và state tiếp theo.

Tóm lại:

  • Một Bloc phải extend base class Bloc của core bloc package.
  • Một Bloc phải định nghĩa initial state (state ban đầu).
  • Phải implement function mapEventToState. Function này nhận event vào như là tham số. Nó trả về output là stream của state mới.
  • Để truy cập vào current state của bloc, chúng ta có thể sử dụng thuộc tính currentState.
  • Một bloc phải có phương thức dispatch. Dispatch nhận một event và trigger mapEventToState. Dispatch có thể gọi trong lớp presentation trong bloc.
  • onTransition được gọi trước khi update state bloc được update.
  • onError có thể override để biết được exception của bloc.

Dưới đây là một số code demo về Bloc:

Bước 1: Tạo Events

Bước 2: Tạo State

Bước 3: Tạo Bloc

Bước 4: Tạo BlocProvider trong main.dart

Bước 5: Sử dụng state Bloc và dispatch events

Bài viết này mình đã có viết ngắn gọn và dễ hiểu nhất về Bloc và cách sử dụng nó. Cảm ơn các bạn đã đọc bài của mình 😄

Tham khảo: https://medium.com/@mahmudahsan/how-to-use-bloc-in-flutter-to-manage-state-d0e66c0b47f1

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo