Dart Redux Epics 项目教程

Dart Redux Epics 项目教程

dart_redux_epics Redux.dart middleware for handling actions using Dart Streams 项目地址: https://gitcode.com/gh_mirrors/da/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 集成到你的项目中，并利用其强大的功能来处理复杂的异步操作。

dart_redux_epics Redux.dart middleware for handling actions using Dart Streams 项目地址: https://gitcode.com/gh_mirrors/da/dart_redux_epics