使用 Flutter Bloc 在删除过程中如何显示错误消息或执行成功操作？

Question

我有一个块，例如

PostsBloc

，它公开一个事件

LoadData

和一个事件

DeleteData

，并发出

LoadableBlocState<Post>

类型的状态（下面的类代码）

该块正在使用一个调用 http 端点的存储库来实现此目的。

如果删除调用得到响应 statusCode !== 200 我想向前端（脚手架）显示错误消息。我想显示“每次发生此错误时”

如果删除成功（statusCode 200），我想从数据中删除这篇文章，并在用户界面中显示成功消息。 如果我从帖子屏幕本身删除帖子（例如

post_screen.dart

已加载帖子 ID 3，然后想要返回弹出上下文。

我尝试了删除错误

拥有一个可以容纳“非致命”错误并监听它们的状态

import 'package:equatable/equatable.dart';

class LoadableBlocState<T> extends Equatable {
  final bool loading;
  final T? data;
  final LoadableBlocError? error;

  const LoadableBlocState._({
    required this.loading,
    required this.data,
    required this.error,
  });

  const LoadableBlocState.initial()
      : this._(
          loading: false,
          data: null,
          error: null,
        );

  const LoadableBlocState.loading()
      : this._(
          loading: true,
          data: null,
          error: null,
        );

  const LoadableBlocState.loaded(T data)
      : this._(
          loading: false,
          data: data,
          error: null,
        );

  LoadableBlocState.errorLoading(Object error)
      : this._(
          loading: false,
          data: null,
          error: LoadableBlocError.withError(
              action: LoadableBlocAction.fetch, error: error),
        );

  LoadableBlocState.otherError(
      LoadableBlocState current, LoadableBlocError error)
      : this._(
          loading: current.loading,
          data: current.data,
          error: error,
        );

  bool isFetchFailed() =>
      error != null && error!.action == LoadableBlocAction.fetch;

  @override
  List<Object?> get props => [this.loading, this.data, this.error, this.error];
}

class LoadableBlocError extends Equatable {
  final LoadableBlocAction action;
  final String? code;
  final Object? error;

  const LoadableBlocError._(
      {required this.action, required this.code, required this.error});

  const LoadableBlocError.withCode(
      {required LoadableBlocAction action, required String code})
      : this._(action: action, code: code, error: null);

  const LoadableBlocError.withError(
      {required LoadableBlocAction action, required Object error})
      : this._(action: action, code: null, error: error);

  @override
  List<Object?> get props => [action, code, error];
}

enum LoadableBlocAction {
  fetch,
  delete,
  create,
  update,
}

我使用

听了发出上述类型状态的块

1. Bloclistener 不起作用，因为如果状态不改变，它只会触发 1 次，而不是 2 次。用例：用户单击“删除帖子”按钮，第一次调用失败，脚手架显示正常。用户再次点击，再次失败，状态没有改变，块监听器没有被触发
2. BlocConsumer，工作原理与上面类似

使用集团反模式的成功方法：

我找不到尊重集团设计模式的正确解决方案。 我在下面发布了一些效果很好的解决方案

方法1

1. 表示层，示例：posts_view.dart a) 直接调用存储库 b) 如果 code !== 200 则显示脚手架，否则发出 bloc 事件以删除发布数据

问题： 您认为在按照块的设计方式使用块的同时支持我的用例的最简洁的方法是什么？我无法在整个网络上找到使用块来实现如此简单的单一正确解决方案，想要监听删除/更新/插入错误并在每次发生时显示它们，而不仅仅是一次。

这看似简单，实则更复杂。另一个例子：您触发帖子 id 3 的帖子删除，然后打开帖子 1 的 post_screen。 您从帖子 ID 3 中收到错误，并在屏幕 1 中显示错误。可能还必须发送标识符。我尝试过，但 bloclistener 仅在连续错误时触发一次。

Answer 1

正如您所说，您的问题是第二个 TapOn 不会显示错误消息，解决方案是在用户单击按钮后立即将状态更改为加载或其他任何内容，然后开始删除过程，结果是错误或成功