[译][官方文档] Flutter状态管理库 Riverpod - 为什么是 Riverpod ?

581 阅读3分钟

!!!译文为作者本人人肉翻译~转载请注明出处!!!


原文链接:Why Riverpod? | Riverpod

pub:riverpod | Dart Package (flutter-io.cn)

译时版本: 2.4.5


之前翻译过 Riverpod 的官方文档,现在随着版本更新,官方文档又多了很多新内容,所以再补充翻译一下。
之前翻译过的内容,现在官方文档有中文了。
Flutter状态管理库Riverpod官方文档翻译汇总 - 掘金 (juejin.cn)


为什么是 Riverpod ?

Riverpod 是什么?

Riverpod (Provider的变形单词(字母换了位置))是用于 Flutter/Dart 的响应式缓存框架。

使用声明式和响应式的编程方式,Riverpod 会为你接管应用的很大部分逻辑。 有自动重新获取数据的必须时,可以使用内置错误和缓存发起网络请求。

初心

现代应用很少带有渲染 UI 的所有必要信息。
取而代之的是,数据常会从服务器异步获取。

问题是,异步的代码运行比较复杂。 尽管 Flutter 自带在变化发生时创建状态变量和刷新UI时时的一些处理方式,但是仍然非常受限。
一些挑战仍未解决:

  • 异步请求需要缓存到本地,无论何时 UI 更新都不需要重新执行。
  • 有缓存,但是缓存可能会在没有意识到过期时已经过期了。
  • 需要处理错误和加载中的状态。

要一下子解决这些问题还是比较困难,因为这些问题会受到很多特性的影响,例如:

  • 下拉刷新
  • 无限列表 / 滚动时获取数据
  • 输入时查询
  • 异步请求防抖
  • 不再使用时取消异步请求
  • 积极的界面更新
  • 离线模式offline mode
  • ...

这些特性实现起来比较困难,但对于好的用户体验来说是重要的。 已经有一些包尝试直接解决这些问题,但是还是需要大量的手动工作。

这就是 Riverpod 想要解决的问题。
受 Flutter 组件启发,Riverpod 提供了编写业务逻辑的唯一方式来尝试解决这些问题。
在很多方面 Riverpod 都可以比作组件,只不过它是用于状态管理的。

用这种崭新的方式,上面这些复杂的特性大部分已经被实现了。剩下需要做的就是专注 UI 。

表示怀疑?这里有个示例。下面的代码片段是使用 RiverPod 实现的 Pub.dev 客户端应用的简化版。

// 从 pub.dev 获取包列表
@riverpod
Future<List<Package>> fetchPackages(
  FetchPackagesRef ref, {
  required int page,
  String search = '',
}) async {
  final dio = Dio();
  // 访问 API 。在这里使用 package:dio ,当然可以使用其它任何网络请求包。
  final response = await dio.get<List<Object?>>(
    'https://pub.dartlang.org/api/search?page=$page&q=${Uri.encodeQueryComponent(search)}',
  );

  // 将 JSON 响应解码为 Dart 类。
  return response.data?.map(Package.fromJson).toList() ?? const [];
}

This snippet is all the business logic you need for a "search as we type" + "pull to refresh" + "infinite list", while handling error/loading states.

该代码片段是处理错误和加载中状态时,用于 “输入时查询” 和 “下拉刷新” 和 “无限列表” 的所有业务逻辑,