Dart Redux Epics 项目教程

Dart Redux Epics 项目教程

1、项目介绍

Dart Redux Epics 是一个用于处理 Redux 动作的 Dart 中间件库，基于 Dart Streams。它特别适用于处理复杂的异步操作，如自动完成搜索体验。传统的 Redux 中间件在处理同步更新时表现良好，但在处理复杂的异步操作时可能会显得有些棘手。Dart Redux Epics 通过利用 Dart Streams，使得处理这些复杂任务变得简单，如异步错误处理、取消操作和防抖动等。

2、项目快速启动

安装依赖

首先，确保你已经安装了 Dart SDK。然后，在你的项目中添加 dart_redux_epics 依赖：

dependencies:
  dart_redux_epics: ^latest_version

创建 Epic

假设你的应用有一个搜索框，当用户提交搜索词时，你分发一个 PerformSearchAction，其中包含搜索词。为了实际监听 PerformSearchAction 并发起网络请求获取结果，我们可以创建一个 Epic。

import 'dart:async';
import 'package:redux_epics/redux_epics.dart';

Stream<dynamic> exampleEpic(Stream<dynamic> actions, EpicStore<State> store) {
  return actions
    .where((action) => action is PerformSearchAction)
    .asyncMap((action) => // 伪API，返回SearchResults的Future
      api.search((action as PerformSearchAction).searchTerm)
        .then((results) => SearchResultsAction(results))
        .catchError((error) => SearchErrorAction(error))
    );
}

连接 Epic 到 Redux Store

现在我们已经有了一个 Epic，我们需要将其连接到 Redux Store，以便它可以接收动作流。为此，我们将使用 EpicMiddleware。

import 'package:redux_epics/redux_epics.dart';
import 'package:redux/redux.dart';

var epicMiddleware = new EpicMiddleware(exampleEpic);
var store = new Store<State>(fakeReducer, middleware: [epicMiddleware]);

3、应用案例和最佳实践

组合 Epic 和普通中间件

为了组合 Epic 中间件和普通中间件，只需在列表中同时使用两者。

var store = new Store<AppState>(
  fakeReducer,
  middleware: [myMiddleware, EpicMiddleware<AppState>(exampleEpic)]
);

组合多个 Epic

为了避免一个庞大的 Epic 处理所有类型的动作，最好将 Epic 分解为更小、更易管理和测试的单元。例如，可以有一个 searchEpic、一个 chatEpic 和一个 updateProfileEpic。

import 'package:redux_epics/redux_epics.dart';

final epic = combineEpics<State>([
  searchEpic,
  chatEpic,
  updateProfileEpic,
]);

4、典型生态项目

RxDart

为了执行更高级的操作，通常可以使用 RxDart 库。RxDart 提供了 whereType 方法，可以同时进行类型检查和类型转换。

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

Stream<dynamic> ofTypeEpic(Stream<dynamic> actions, EpicStore<State> store) {
  return actions
    .whereType<PerformSearchAction>()
    .asyncMap((action) =>
      api.search(action.searchTerm)
        .then((results) => SearchResultsAction(results))
        .catchError((error) => SearchErrorAction(error))
    );
}

取消操作

在某些情况下，你可能需要取消一个异步任务。例如，当用户点击搜索按钮开始加载数据，然后点击返回按钮以更正搜索词时，你的应用分发一个 CancelSearchAction。我们可以使用 RxDart 的 switchMap 和 takeUntil 操作符来实现这一点。

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

Stream<dynamic> cancelableSearchEpic(Stream<dynamic> actions, EpicStore<State> store) {
  return actions
    .whereType<PerformSearchAction>()
    .switchMap((action) {
      return Stream.fromFuture(api.search(action.searchTerm)
        .then((results) => SearchResultsAction(results))
        .catchError((error) => SearchErrorAction(error)))
        .takeUntil(actions.whereType<CancelSearchAction>());
    });
}

通过这些步骤，你可以轻松地将 Dart Redux Epics 集成到你的项目中，并利用其强大的功能来处理复杂的异步操作。