Implement BlocObserver untuk Debug dan Mengetahui Proses State Management Bekerja
BlocObserver
Baca Juga: Pengenalan Bahasa Pemrograman DART
- onChange
- Kita perlu override method onChange di dalam bloc untuk melihat perubahan ketika ada state baru pada saat pertama kali dijalankan.
- Seperti yang kita lihat, function onChange memiliki satu argument paramenters yaitu Change.
- Untuk parameters Change disini merepresentasikan perubahan dari satu state ke state yang lain.
- Parameters Change terdiri dari currentState dan nextState.
- Sekarang setiap kali ada state baru terjadi perubahan yang di emitted dan disanalah tempat yang menarik untuk kebutuhan logging/analytics dengan begitu kita akan tau secara spesifik.
- Satuhal yang perlu kita ketahui disini sebelum melakukan operasi apapun di dalam method onChange kita perlu memangil super.onChange terlebih dahulu.
- onTransition
- Jika kita ingin mengamati bloc setiap kali ada event yang
ditambahkan dan penambahan state baru, kita perlu override terlebih
dahulu method onTransition.
- Transition terjadi ketika ada event baru yang ditambahkan dan state
baru yang di emitted dari EventHandler yang di jalankan.
- Transition dipanggil sebelum Bloc state di perbaharui.
- Itulah mengapa penggunaan Transition ini adalah tempat yang bagus
untuk menambahkan logging/analitik di masing-masing bloc.
- Seperti biasa sebelum memasukan operasi yang lain kita perlu
memanggil super.onTransition terlebih dahulu.
- Jika kita ingin mengamati bloc setiap kali ada event yang ditambahkan dan penambahan state baru, kita perlu override terlebih dahulu method onTransition.
- Transition terjadi ketika ada event baru yang ditambahkan dan state baru yang di emitted dari EventHandler yang di jalankan.
- Transition dipanggil sebelum Bloc state di perbaharui.
- Itulah mengapa penggunaan Transition ini adalah tempat yang bagus untuk menambahkan logging/analitik di masing-masing bloc.
- Seperti biasa sebelum memasukan operasi yang lain kita perlu memanggil super.onTransition terlebih dahulu.
- onError
- Untuk mengetahui kesalahan di dalam bloc yang terjadi kita perlu
override method onError terlebih dahulu untuk mengetahui kesalahan
yang di timbulkan ketika dijalankan.
- onError akan dipanggil setiap kali terjadi kesalahan dan
memberitahu BlocObserver.onError.
- Seperti biasa sebelum memasukan operasi yang lain kita perlu
memanggil super.onError terlebih dahulu.
- Untuk mengetahui kesalahan di dalam bloc yang terjadi kita perlu override method onError terlebih dahulu untuk mengetahui kesalahan yang di timbulkan ketika dijalankan.
- onError akan dipanggil setiap kali terjadi kesalahan dan memberitahu BlocObserver.onError.
- Seperti biasa sebelum memasukan operasi yang lain kita perlu memanggil super.onError terlebih dahulu.
- onEvent
- Seperti namanya, setiap kali ada tindakan yang ditambahkan ke dalam
bloc, method onEvent ini akan ke trigger.
- Ini juga merupakan tempat yang bagus untuk menambahkan
logging/analitik begaimana event dari bloc itu bekerja.
- Seperti namanya, setiap kali ada tindakan yang ditambahkan ke dalam bloc, method onEvent ini akan ke trigger.
- Ini juga merupakan tempat yang bagus untuk menambahkan logging/analitik begaimana event dari bloc itu bekerja.
Example
class HomeBloc extends Bloc {
HomeBloc({required FoodRespository foodRespository})
: _foodRespository = foodRespository,
super(const HomeState()) {
on(mapEventToState);
}
final FoodRespository _foodRespository;
Future mapEventToState(HomeEvent event, Emitter emit) async {
try {
final listFood = await _foodRespository.listFood();
emit(HomeState(food: listFood, status: HomeStatus.success));
} on Exception catch (e) {
emit(state.copyWith(message: e.toString(), status: HomeStatus.failure));
}
}
@override
void onTransition(Transition transition) {
super.onTransition(transition);
log(transition.toString());
}
@override
void onChange(Change change) {
super.onChange(change);
log(change.toString());
log(change.currentState.toString());
log(change.nextState.toString());
}
@override
void onError(Object error, StackTrace stackTrace) {
super.onError(error, stackTrace);
log(error.toString());
}
@override
void onEvent(HomeEvent event) {
super.onEvent(event);
log(event.toString());
}
}
Flow overriden Observers
- Seperti yang kita lihat pada sample video yang diatas, ketika pertama kali dijalankan saya telah menambahkan event HomeEventStarted().
- Dari 4 method override yang telah ditambahkan itu pertama kali yang dijalankan adalah method onEvent dan ditriger ke log console.
- Setelah itu, onTransition dipanggil seperti yang sudah dijelaskan sebelumnya, onTransition akan dipanggil sebelum onChange, yang berisi currentState, trigger event, dan nextState.
- Setelah onTransition selesai method onChange dipanggil. Ketika data sedang di load yang dijalankan HomeState.Initial dan setelah berhasil mengambil data seperti yang dilihat di log console kita mendapatkan HomeState.succes, jadi step" yang dijalankan seperti berikut: onEvent > onTransition > onChange > onError.
Membuat Global BlocObserver
class GlobalObserver extends BlocObserver {
@override
void onEvent(Bloc bloc, Object? event) {
log('OnEvent: ${bloc.runtimeType} $event');
super.onEvent(bloc, event);
}
@override
void onChange(BlocBase bloc, Change change) {
log(‘OnChange: ${bloc.runtimeType} $change’);
super.onChange(bloc, change);
}
@override
void onTransition(Bloc bloc, Transition transition) {
log(‘OnTransition: ${bloc.runtimeType} $transition’);
super.onTransition(bloc, transition);
}
@override
void onError(BlocBase bloc, Object error, StackTrace stackTrace) {
log(‘OnError: ${bloc.runtimeType} $error $stackTrace’);
super.onError(bloc, error, stackTrace);
}
}