Flutter插件mini_tea的使用_Mini TEA 是一个用于 Dart 和 Flutter 的反应式和函数式状态管理库

Flutter插件mini_tea的使用_Mini TEA 是一个用于 Dart 和 Flutter 的反应式和函数式状态管理库

Mini TEA 是一个用于 Dart 和 Flutter 的反应式和函数式状态管理库，灵感来源于 The Elm Architecture (TEA)，并专门针对 Flutter 框架进行了优化。它强调将纯业务逻辑与副作用分离，促进编写干净、可测试且易于维护的代码。

Flutter插件mini_tea主要特性

• 单向数据流：确保数据以单一方向流动，简化状态管理并减少潜在错误。
• 纯业务逻辑：保持核心业务逻辑纯净，无副作用，增强预测性和测试性。
• 显式副作用：通过专用构造称为效果处理器来显式管理副作用。
• 一切皆数据：将架构中的所有意图和操作视为数据，导致一致且透明的代码库。

Flutter插件mini_tea开始使用

创建更新函数

这是你的业务逻辑。它必须是一个纯函数。

可以将其视为业务逻辑的状态机。

此函数必须返回一个包含可选状态和可选效果的记录。如果状态不为空，它将在功能中进行更新。如果效果不为空，它将在效果处理器中执行。

为了简化，你可以使用 next 辅助函数，它会在编译时内联。

Next<State, Effect> update(State state, Msg message) {
  switch(message) {
    case Increment():
      return next(
        state: state.copyWith(count: state.count + 1),
        effects: [], // 如果没有效果，可以为空列表
      );
    case Decrement():
      return next(
        state: state.copyWith(count: state.count - 1),
        effects: [],
      );
    case AskRandom():
      return next(
        state: state,
        effects: [GetRandom()],
      );
    case SetCounter():
      return next(
        state: state.copyWith(count: message.value),
        effects: [],
      );
  }
}

创建效果处理器

这是你的副作用处理。在这里你可以进行 API 调用、从数据库获取数据等。

final class ExampleEffectHandler implements EffectHandler<Effect, Msg> {
  final _random = Random();

  [@override](/user/override)
  void call(Effect effect, MsgEmitter<Msg> emit) {
    switch (effect) {
      case GetRandom():
        return _getRandom(effect, emit);
    }
  }

  void _getRandom(GetRandom effect, MsgEmitter<Msg> emit) {
    final num = _random.nextInt(effect.max - effect.min) + effect.min;
    final msg = SetCounter(value: num);
    emit(msg);
  }
}

创建功能

现在，让我们将一切都组合在一起。

final feature = Feature<
  State, 
  Msg, 
  Effect>(
  initialState: const State(count: 0),
  update: update,
  effectHandlers: [ExampleEffectHandler()],
);

await feature.init(); // 不要忘记初始化你的功能

// ...

feature.accept(const Increment());
feature.accept(const Decrement());
feature.accept(const AskRandom());
feature.accept(const Increment());

初始化

你必须在使用之前初始化你的功能。所有你需要做的就是调用 init 方法。

对于一些特定情况，当你需要在进入屏幕时从 API 加载数据时，可以使用 initialEffects 字段。所有你需要做的就是添加一些 Effect 到它，并且它们将与你的 EffectHandler 一起执行。

final feature = Feature<
  State, 
  Msg, 
  Effect>(
  initialState: const State(count: 0),
  update: update,
  effectHandlers: [ExampleEffectHandler()],
  initialEffects: [GetRandom()],
);

await feature.init();

释放资源

当你不再需要你的功能时，必须调用 dispose 方法。这将释放所有资源。

对于 EffectHandler，有两种选择：

• 第一，实现 Disposable 接口来释放你的处理器。在这个方法中，你可以释放资源，如 StreamSubscription 或 Timer。这样功能会自动调用处理器的 dispose 方法。
• 第二，向 disposableEffects 字段添加可释放的效果。所有你需要做的就是添加一些 Effect 到它，并且它们将与你的 EffectHandler 一起执行。

两种选项是等效的，但第二种更明显，因为你可以通过查看功能看到当功能被释放时将会执行什么。

处理特定效果

如果你向功能的 effectHandlers 添加 EffectHandler，这些处理器将为所有效果执行。这对大多数情况来说很好，但有时你可能需要以特定方式处理特定效果。

为此，我们有称为 FeatureEffectWrapper 的东西。这只是围绕你的功能的一个包装器，它可以监听特定类型的效果并使用你的处理器处理它们。

要创建一个包装器，你需要在你的功能上调用 wrapEffects 扩展方法。

final feature = Feature<
  State, 
  Msg, 
  Effect>(
  initialState: const State(count: 0),
  update: update,
)
.wrapEffects<GetRandom>(const ExampleEffectHandler());

await feature.init();

在这个例子中，我们创建了一个功能，它可以使用两个不同的处理器处理两种类型的效果。

一个将由 ExampleEffectHandler 处理，另一个将由 ExampleEffectHandler 处理。正如你所猜测的那样，第一个将异步地在另一个隔离中执行所有效果，而第二个将同步地执行所有效果。

小技巧

Mini TEA 最糟糕的部分之一是我们必须写很多泛型。状态、消息、效果、功能本身。

为了简化，我们可以创建一些类型定义和工厂函数。

typedef ExampleFeature = Feature<State, Msg, Effect>;

ExampleFeature exampleFeatureFactory() => ExampleFeature(
  initialState: const State(count: 0),
  update: update,
  effectHandlers: [ExampleEffectHandler()],
);

完整示例代码

import 'dart:math';

import 'package:mini_tea/feature.dart';

typedef ExampleFeature = Feature<State, Msg, Effect>;

Future<void> main() async {
  final feature = ExampleFeature(
    initialState: const State(count: 0),
    update: update,
    effectHandlers: [ExampleEffectHandler()],
    // initialEffects: [const GetRandom()], // 我们可以设置此初始效果，以便我们的功能在初始化时获取随机数
  );

  await feature.init();

  feature.accept(const Increment());
  feature.accept(const Decrement());
  feature.accept(const AskRandom());
  feature.accept(const Increment());
}

// 消息

sealed class Msg {}

final class Increment implements Msg {
  const Increment();
}

final class Decrement implements Msg {
  const Decrement();
}

final class AskRandom implements Msg {
  const AskRandom();
}

final class SetCounter implements Msg {
  final int value;

  const SetCounter({required this.value});
}

// 状态

final class State {
  final int count;

  const State({required this.count});

  State copyWith({
    int? count,
  }) =>
      State(count: count ?? this.count);
}

// 效果

sealed class Effect {}

final class GetRandom implements Effect {
  final int min;
  final int max;

  const GetRandom({
    this.min = 0,
    this.max = 100,
  });
}

// 更新

Next<State, Effect> update(State state, Msg message) {
  switch (message) {
    case Increment():
      // 当递增时，只增加 1 并且不执行其他操作
      return next(state: state.copyWith(count: state.count + 1));
    case Decrement():
      // 同样，递减时减去 1
      return next(state: state.copyWith(count: state.count - 1));
    case AskRandom():
      // 当请求随机数时，不更新状态
      // 但是发送效果以真正从处理器中获取随机数
      return next(effects: const [GetRandom()]);
    case SetCounter():
      // 当我们得到一个特定的数字时，只需设置它
      return next(state: state.copyWith(count: message.value));
  }
}

// 效果处理器

// 在这个类中，我们处理副作用，因此我们的逻辑是纯粹的
final class ExampleEffectHandler implements EffectHandler<Effect, Msg> {
  final _random = Random();

  [@override](/user/override)
  void call(Effect effect, MsgEmitter<Msg> emit) {
    switch (effect) {
      case GetRandom():
        return _getRandom(effect, emit);
    }
  }

  void _getRandom(GetRandom effect, MsgEmitter<Msg> emit) {
    final num = _random.nextInt(effect.max - effect.min) + effect.min;
    final msg = SetCounter(value: num);
    emit(msg);
  }
}