Bloc: is it possible to yield 2 time the same state?

user_10139611 0
Viewed 8985

In the login view, if the user taps on the login button without having inserted his credentials, the LoginFailState is yield and the view reacts to it. If he taps again, this LoginFailstate is yield again, but the view doesn't react to it. So, is there a way to yield more times the same state?

There is some code to better explain my situation:

class LoginBloc extends Bloc<LoginEvent, LoginState> {
  @override
  LoginState get initialState => LoginUninitialized();

  @override
  Stream<LoginState> mapEventToState(LoginEvent event) {
    if (event is loginButtonPressed) {
      yield LoginFailState();
    }
  }

View:

 @override
  Widget build(BuildContext context) {
    return BlocBuilder(
      bloc: _loginBloc,
      builder: (BuildContext context, LoginState state) {
    if (state is LoginFail) {
        print ('Login fail');
    }
    return Column(
          ...
    )
bloc flutter state handle
5 Answers

You can receive an update for the "same" State if you don't extend Equitable, or implement your own '==' logic which makes the two LoginFailStates equal.

The solution is to yield a different State in between, like in the Bloc example.

yield LoginLoading();

It gets called on every login button tap. Felangel's LoginBloc example.

user_44215100

By default BLoC pattern will not emit state when the same state will be passed one after another. One way to do this is to pass your initial BLoC state after passing LoginFailState.

So after user clicks on the button with wrong credentials passed states will not be:

LoginFailState()
LoginFailState()

but

LoginFailState()
LoginEmptyState()
LoginFailState()
LoginEmptyState()

Which will make UI react to each of them.

But I think that the best and cleanest solution is to pass LoadingState from BLoC before passing LoginFailState().

You can follow the blog post that I have recently written regarding this topic.

user_71201470

Problem

When you try to emit a new state that compares equal to the current state of a Bloc, the new state won't be emitted.

This behavior is by design and is discussed here.

When I say "compares equal" I mean that the == operator for the two state objects returns true.

Solution

There are two proper approaches:

  1. Your state class should NOT extend Equatable. Without Equatable, two objects of the same class with the same fields will NOT compare as equal, and this new state will always be emitted.
  2. Sometimes you need your state class to extend Equatable. In this case, just add the result of the identityHashCode(this) function call to your props getter implementation:
class NeverEqualState extends Equatable {

  @override
  List<Object?> get props => [identityHashCode(this)];
}

Note that I use identityHashCode that works regardless the operator == is overloaded or not. In contrast, hashCode will not work here.

Warning:

  1. Do not use random values in the getter implementation List<Object> get props => [Random().nextDouble()];. Random variables are random, meaning that with extremely low probability you still might get two equal values in a sequence that will break this workaround. This is extremely unlikely, so it's not possible to reproduce and debug this.
  2. You can and should include fields in your get props implementation, but keep in mind that when all fields compare as equal the objects will also compare as equal.
  3. Emitting some other state in-between two equal states works but it forces your BlocBuilder to rebuild part of UI and BlocListener to execute some logic. It's just inefficient.

Finally, why would you like to have a state class extend Equatable but still not compare equal? This might be needed when your state class is actually the root of a hierarchy, where some descendants need to implement the == operator properly, and some need to never compare equal. Here is the example:

class BaseMapState extends Equatable {
  const BaseMapState();

  @override
  List<Object?> get props => [];
}

class MapState extends BaseMapState {
  final Map<String, Report> reports;
  final Report? selectedReport;
  final LatLng? selectedPosition;
  final bool isLoadingNewReports;

  const MapState(
      {this.reports = const {},
      this.selectedReport,
      this.selectedPosition,
      this.isLoadingNewReports = false});

  @override
  List<Object?> get props => [
        ...reports.values,
        selectedReport,
        selectedPosition,
        isLoadingNewReports
      ];
}

class ErrorMapState extends BaseMapState {
  final String? error;

  const ErrorMapState(this.error);

  @override
  List<Object?> get props => [identityHashCode(this), error];
}

class NeedsAuthMapState extends ErrorMapState {
  const NeedsAuthMapState() : super('Authentication required');
}

class NoInternetMapState extends ErrorMapState {
  const NoInternetMapState() : super("No Internet connection");
}
user_41196800

If you use Equitable and tries to emit two equal instances of the same State with different properties, make sure that you override props array. By overriding props array, Equitable will know how to compare state instances.

 class TablesLoadedState extends Equatable {
  final List<TableEntity> tablesList;

  TablesLoadedState(this.tablesList);

  @override
  List<Object> get props => [tablesList];
}

So, when bloc emits two instances of the same state with different values, these state-instances will be passed to BlocListener and UI will be updated according to new data.

user_50497810

A late possible workaround would be adding a random double to the state get props, this way the state won't be equal and you can yield them one after the other if you want. also, Random().nextDouble() complexity is O(1) so you don't need to worry about performance

class LoginFailState extends LoginState {
  @override
  List<Object> get props => [Random().nextDouble()];
}
user_121566370
Related