Flutter状态管理插件jaspr_riverpod的使用

Flutter状态管理插件jaspr_riverpod的使用

简介

jaspr_riverpod 是一个为 Jaspr 框架设计的状态管理库，它基于 Riverpod 2，并支持所有类型的提供者（Provider）和修饰符。与 flutter_riverpod 相比，jaspr_riverpod 有一些不同的特性，主要是去除了 Consumer 和 ConsumerComponent，并引入了 SyncProvider 用于在服务器和客户端之间同步状态。

主要差异

1. 没有 Consumer / ConsumerComponent：你可以直接使用 context.read() 和 context.watch() 来访问提供者。
2. 新增 SyncProvider：用于在服务器和客户端之间同步值，特别适用于服务器端渲染（SSR）。

访问提供者

jaspr_riverpod 提供了对 BuildContext 的扩展方法，使得你可以直接在任何组件中使用 context.watch() 和 context.read() 来访问提供者，而不需要像 flutter_riverpod 那样依赖 WidgetRef。

示例代码（Flutter vs Jaspr）

Flutter

// (Flutter)
// 需要继承自 ConsumerWidget
class MyWidget extends ConsumerWidget {
  // 需要接受 WidgetRef 参数
  Widget build(BuildContext context, WidgetRef ref) {
    // 使用 ref 来访问提供者
    var value = ref.watch(myProvider);
    return Text(value);
  }
}

Jaspr

// (Jaspr)
// 只需继承普通的组件
class MyComponent extends StatelessComponent {
  // 不需要额外的参数
  Iterable<Component> build(BuildContext context) sync* {
    // 使用 context 来访问提供者
    var value = context.watch(myProvider);
    yield Text(value);
  }
}

替代 Consumer

在 jaspr_riverpod 中，我们不再需要 Consumer 组件。如果你只想让组件树的某一部分在监听提供者时重新构建，可以使用 Builder 组件。Builder 会提供一个新的 context，你可以在其中调用 context.watch()。

示例代码

Builder(
  builder: (context) sync* {
    var value = context.watch(...);
    yield ...;
  },
);

预加载和同步提供者状态

jaspr_riverpod 提供了 SyncProvider，用于在服务器和客户端之间同步状态。SyncProvider 的创建函数只会在服务器端执行，客户端会接收到同步后的值。这在服务器端渲染（SSR）场景中非常有用。

示例代码

final mySyncProvider = SyncProvider<int>((ref) async {
  // 在服务器端执行异步操作，例如从数据库获取数据
  await Future.delayed(Duration(seconds: 1));
  return 100;
}, id: 'initial_count');

• id 是必需的，用于标识同步的值。
• create 函数只在服务器端执行，客户端不会执行该函数，而是接收同步后的值。
• SyncProvider 类似于 FutureProvider，返回一个 AsyncValue<T> 类型的值。

完整示例 Demo

以下是一个完整的 jaspr_riverpod 示例，展示了如何使用 Provider 和 SyncProvider 来管理状态。

1. 创建 Provider

首先，我们定义一个简单的 StateProvider 来管理计数器的状态。

import 'package:jaspr/jaspr.dart';
import 'package:jaspr_riverpod/jaspr_riverpod.dart';

// 定义一个 StateProvider 来管理计数器
final counterProvider = StateProvider<int>((ref) => 0);

// 定义一个 SyncProvider 来模拟从服务器获取初始计数
final initialCounterProvider = SyncProvider<int>((ref) async {
  // 模拟从服务器获取数据
  await Future.delayed(Duration(seconds: 1));
  return 100;
}, id: 'initial_counter');

2. 创建组件

接下来，我们创建一个组件来显示计数器，并允许用户通过按钮增加计数。

class CounterApp extends StatelessComponent {
  @override
  Iterable<Component> build(BuildContext context) sync* {
    // 使用 context.watch 来监听计数器的状态
    final counter = context.watch(counterProvider);
    final initialCounter = context.watch(initialCounterProvider);

    yield Div(
      children: [
        Text('当前计数: ${counter.state}'),
        Button(
          child: Text('增加计数'),
          onClick: () {
            // 使用 context.read 来更新计数器
            context.read(counterProvider).state++;
          },
        ),
        if (initialCounter.value is AsyncData<int>)
          Text('初始计数: ${initialCounter.value.asData!.value}'),
        else if (initialCounter.value is AsyncLoading)
          Text('正在加载初始计数...'),
        else if (initialCounter.value is AsyncError)
          Text('加载初始计数失败: ${initialCounter.value.error}'),
      ],
    );
  }
}

3. 运行应用

最后，我们将 CounterApp 组件作为应用程序的根组件运行。

void main() {
  runApp(
    ProviderScope(
      child: CounterApp(),
    ),
  );
}