Flutter - 如何在 Flutter Riverpod Generator 中使用 Notifier 和 AsyncNotifier

455

通过引用 riverpod_generator 包,使得使用 Riverpod 编写 Flutter 应用程序更加容易且快速(使用 @riverpod 注解和通过 builder_runner 自动生成所有 providers)。

通过 上篇文章 ,我们介绍了 Riverpod Generator 的基本使用,本篇文章,我们将进一步了解 NotifierAsyncNotifier 类。

这些类的出现是为了取代 StateNotifier,并且有了如下的好处:

  1. 更容易执行异步初始化
  2. 不再需要传递 ref
  3. 不再需要手动声明 provider(如果使用 Riverpod Generator)

我们现在开始来了解吧!

将涵盖的内容

为了更便于理解,我们将使用两个示例。

1. 计数器

第一个例子我会使用一个基于 StateProvider 的简单计数器,然后基于 Notifer 将它进行转换,最后通过 Riverpod Generator 我们看一下如何自动生成 NotifierProvider

2. 带有异步请求的列表页面

第二个例子我会构造一个列表页面,数据是由异步获取。尝试使用 AsyncNotifier 替代传统写法。

计数器

首先,我们使用 StateProvider 来构建一个 counterProvider

image.png 以上的代码大家应该最熟悉不过了:

  1. 可以在 build 方法中 watch counterProvider 的值
  2. 在按钮回调中可以对值进行改变

这个例子非常适用于简单变量的存储,但是如果你的状态复杂一些或者带有一些逻辑,那么 StateProvider 就无法正常使用,你可能会用到 StateNotifierProvider 结合 StateNotifier 来解决这个问题。但现在建议使用新的 Notifier 类。

Notifier

下面是我们演示如何声明一个基于 NotifierCounter 类。 可以看到,build 方法返回默认值,并且可以在里面添加方法来实现复杂逻辑。 如果想创建一个 provider 可以像下面这样 CounterNotifier.new 构造:

image.png

Notifier 和 Riverpod Generator

以下是我们如何使用新的 @riverpod 语法声明相同的 Counter 类:

image.png

image.png 可以看到:

  1. 自动为我们创建了 counterProvider
  2. _$CounterAutoDisposeNotifier<int>

稍微复杂一点的例子

这个例子稍微复杂了一些,有一个列表页面,有「datasource」和「index」两个属性。

image.png 但如果我们的初始化数据是异步获取的呢?我们该怎么使用?

可以使用 AsyncNotifier 创建异步状态类并完全替换 StateNotifierStateNotifierProvider。让我们接着往下看。

带有异步请求的列表页面

当初始化的数据是异步获取的,我们可以用下面的方式来构造我们的 service:

image.png

image.png 可以看到自动生成了一个类型为 AutoDisposeAsyncNotifierProvider<ListViewService, ListVieweState> 的 provider。widget 中可以这样使用:

image.png 同样 build 方法也可以传参数,可以理解为 family 的平替,而且再也不用传递 ref 了:

image.png


这篇文章篇幅比较短,如果熟悉了上篇文章且已经会使用了 @riverpod 注解,那么你会发现这篇文章的内容实现起来非常简单。

我会在下篇文章分享一个我个人写的全部由 Riverpod Generator 通篇生成 provider 的 demo。

赶紧去试试吧!