How to manage multiple states with one bloc for a single page?

Question

I have 15 api to show home page. what is the best way to manage all 15 api status in one state?

I created 15 Status abstract classes and use them as constructor for state class and manage building each widget with buildWhen, but it's been very complex. What is the best practice?

HomeState class that pass to ui

class HomeState {
  Api1Status? api1status;
  Api2Status? api2Status;

  HomeState({
    this.api1status,
    this.api2Status,
  });

  HomeState copyWith({
    Api1Status? newApi1status,
    Api2Status? newApi2Status,
  }) {
    return HomeState(
      api1status: newApi1Status ?? this.api1status,
      api2Status: newApi2Status ?? this.api2Status,
    );
  }
}

each API status for managing its state

@immutable
abstract class Api1Status{}

class Api1Loading extends Api1Status{}

class Api1Completed extends Api1Status{
  final Api1Entity Api1Entity;
  Api1Completed(this.Api1Entity);
}

class Api1Error extends Api1Status{
  final String message;
  Api1Error(this.message);
}

and 14 more status classes for each API

What is the best practice?

Answer 1

you can create a DataState abstract class to manage state of each API response

abstract class DataState<T> {
  late final T? data;
  late final String? error;

  DataState(this.data, this.error);
}

class DataSuccess<T> extends DataState<T> {
  DataSuccess({required T data}) : super(data, null);
}

class DataFailed<T> extends DataState<T> {
  DataFailed({required String error}) : super(null, error);
}

class DataLoading<T> extends DataState<T> {
  DataLoading() : super(null, null);
}