Riverpod：您如何使用 StateNotifier 管理加载和错误状态？

Question

如何像在Riverpod中使用FutureProvider那样使用StateNotifier加载/错误状态？

我们可以使用 setState、使用三元运算符的 var isLoading 和 didChangeDependencies 对 Provider 做同样的事情。

Answer 1

FutureProvider 与AsyncValue 一起工作。
您也可以像这样将 AsyncValue 与 StateNotifier 一起使用：

final randomNumberProvider = StateNotifierProvider<RandomNumberNotifier, AsyncValue<int>>((ref) {
  return RandomNumberNotifier();
});

class RandomNumberNotifier extends StateNotifier<AsyncValue<int>> {
  RandomNumberNotifier() : super(const AsyncLoading());

  void getNewNumber() async {
    state = const AsyncLoading();
    await Future.delayed(const Duration(seconds: 3));
    final number = Random().nextInt(500);
    state = AsyncValue.data(number);
  }
}

它允许您像这样使用 when 方法：

class Page extends ConsumerWidget {
  const Page({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final randomNumberNotifier = ref.watch(randomNumberProvider);
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          final p = ref.read(randomNumberProvider.notifier);
          p.getNewNumber();
        },
        child: const Icon(Icons.add),
      ),
      body: Center(
        child: randomNumberNotifier.when(
          data: (data) {
            return Text(data.toString());
          },
          error: (_, __) {
            return const Text("An error occurred");
          },
          loading: () {
            return const CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}