Flutter - 轉換 flutter 塊事件以添加去抖動

Question

我正在嘗試使用 flutter 塊制作一個無限列表。

我從這里參考： https://github.com/felangel/bloc/blob/926029cae2d7614d38b5a9a8952e36bb59054b02/examples/github_search/common_github_search/lib/src/github_search_bloc/github_search_bloc.dart#L15

根據這篇文章，要在兩個事件之間添加延遲以便 api 不會被發送垃圾郵件，您需要重寫transformEvents並向這樣的事件添加去抖動：

@override
  Stream<GithubSearchState> transformEvents(
    Stream<GithubSearchEvent> events,
    Stream<GithubSearchState> Function(GithubSearchEvent event) next,
  ) {
    return (events as Observable<GithubSearchEvent>)
        .debounceTime(
          Duration(milliseconds: 300),
        )
        .switchMap(next);
  }

我面臨的問題是 Observable 已被 RxDart 棄用，我不確定如何完成上述要求。

Answer 1

我找到了解決方案。

@override
  Stream<Transition< GithubSearchEvent, GithubSearchState >> transformEvents(
      Stream< GithubSearchEvent > events, transitionFn) {
    return events
        .debounceTime(const Duration(milliseconds: 300))
        .switchMap((transitionFn));
  }

Answer 2

自bloc 8.0.0 以來，語法略有變化，您需要將其作為轉換器傳遞on function：

import 'package:rxdart/rxdart.dart';
//...

    on<GithubSearchEvent>(
      (event, emit) {},
      transformer: (events, mapper) {
        return events.debounceTime(const Duration(milliseconds: 300));
      },
    );

您可以像這樣創建一個可重用的變壓器作為頂級 function：

EventTransformer<Event> debounceTransformer<Event>(Duration duration) {
  return (events, mapper) => events.debounceTime(duration);
}

並像這樣使用它：

    on<GithubSearchEvent>(
      (event, emit) {},
      transformer: debounceTransformer(Duration(milliseconds: 300)),
    );

Answer 3

我無法向@user2220771 添加評論，因為我的聲譽太低。

這將不起作用：

EventTransformer<Event> debounceTransformer<Event>(Duration duration) {
  return (events, mapper) => events.debounceTime(duration);
}

您必須將 map 切換為：

EventTransformer<Event> debounceTransformer<Event>(Duration duration) {
  return (events, mapper) {
    return events.debounceTime(duration).switchMap(mapper);
  };
}

Answer 4

我有一個類似的問題，我可以通過添加以下導入來解決它

import 'package:stream_transform/stream_transform.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

然后我們可以提供一個自定義的 EventTransformer 來改變 Bloc 處理傳入事件的方式。

EventTransformer<T> debounce<T>(Duration duration) {
  return (events, mapper) => events.debounceTime(duration).flatMap(mapper);
}

現在我們可能想要去抖動到后端的請求以避免速率限制並減少后端的成本/負載。

CounterBloc() : super(0) {
  on<Increment>(
    (event, emit) => emit(state + 1),
    /// Apply the custom `EventTransformer` to the `EventHandler`.
    transformer: debounce(const Duration(milliseconds: 300)),
  );
}

注意：我使用的是flutter_bloc: ^8.1.1