Flutter极简状态管理库Creator

我之前一直用riverpod来做状态管理，最近发现了一个新发布的库，尝试了一下，非常简洁好用，给大家推荐一下。叫做Creator（地址），刚发布几天就有几十个👍。

这个库的API跟riverpod很接近，但是更加简洁清晰，基本上没有什么上手难度。

先看一下它的counter例子：

// 定义状态
final counter = Creator.value(0);
Widget build(BuildContext context) {
  return Column(
    children: [
      // 响应状态
      Watcher((context, ref, _) => Text('${ref.watch(counter)}')),
      TextButton(
        // 更新状态
        onPressed: () => context.ref.update<int>(counter, (count) => count + 1),
        child: const Text('+1'),
      ),
    ],
  );
}

它的核心概念极其简单，只提供两种creator：

• Creator 产生一系列的 T。

• Emitter 产生一系列的 Future<T>。

这里T可以是任何类型，甚至可以是Widget。然后它把所有的creator都组织成一个有向图（叫做Ref）。

还是举一个官网的例子吧。可以在DartPad上跑，显示摄氏温度或者华氏温度：

// repo.dart

// 假装调用一个后端API。
Future<int> getFahrenheit(String city) async {
  await Future.delayed(const Duration(milliseconds: 100));
  return 60 + city.hashCode % 20;
}
// logic.dart

// 简单的creator
final cityCreator = Creator.value('London');
final unitCreator = Creator.value('Fahrenheit');

// 可以像Iterable/Stream那样使用 map, where, reduce 之类的.
final fahrenheitCreator = cityCreator.asyncMap(getFahrenheit);

// 组合不同的creator，产生新的业务逻辑。
final temperatureCreator = Emitter<String>((ref, emit) async {
  final f = await ref.watch(fahrenheitCreator);
  final unit = ref.watch(unitCreator);
  emit(unit == 'Fahrenheit' ? '$f F' : '${f2c(f)} C');
});

// 摄氏华氏温度转换
int f2c(int f) => ((f - 32) * 5 / 9).round();
// main.dart

Widget build(BuildContext context) {
  return Watcher((context, ref, _) => 
      Text(ref.watch(temperatureCreator.asyncData).data ?? 'loading'));
}
... context.ref.set(cityCreator, 'Pairs');  // 会调用后端API
... context.ref.set(unitCreator, 'Celsius');  // 不会调用后端API

可以看出，当用户改变所选城市之后， 状态会沿着图中的箭头传导，一直传到最后的Creator<Widget>，从而更新UI。

我觉得这个有向图的设计还是非常独特的，很好理解，也很简单。组织比较复杂的业务逻辑的时候非常方便。

这个库的核心代码才500行，感兴趣的同学可以去看官方文档和代码。

欢迎讨论！

作者：Jay_Guo
来源：juejin.cn/post/7107433326054473736