likes
comments
collection
share

Flutter极简状态管理库Creator

作者站长头像
站长
· 阅读数 45

我之前一直用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上跑,显示摄氏温度或者华氏温度:

Flutter极简状态管理库Creator

Flutter极简状态管理库Creator

// 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行,感兴趣的同学可以去看官方文档和代码。

欢迎讨论!

转载自:https://juejin.cn/post/7107433326054473736
评论
请登录