How can I combine two AsyncNotifierProviders?

[anidotnet]

How can I combine 2 AsyncNotifierProviders where one AsyncNotifierProvider is dependent on another AsyncNotifierProvider?

Let's say I have a top level async notifier provider as below

final asyncTodosProvider =
    AsyncNotifierProvider<AsyncTodosNotifier, List<Todo>>(() {
  return AsyncTodosNotifier();
});

Now if this provider is dependent on another AsyncNotifierProvider and want to fetch the data from the second AsyncNotifierProvider and also reacts to the changes of the second AsyncNotifierProvider, how do I write the asyncTodosProvider? I could not find any example of this scenario.

[rrousselGit]

AsyncTodosNotifier has access to "ref". It can use it to read other providers.

[anidotnet]

But how to listen to the other provider? In other words, if the state changes in the second provider, how to make the listener of the first provider gets notified of the change?

[rrousselGit]

Use ref.listen or ref.watch

[anidotnet]

Here is the scenario I am trying to explain.

AsyncNotifierProvider1 --> AsyncNotifierProvider2 --> UI

Now as usual, if the state changes in AsyncNotifierProvider2, UI will get notified. But additionally I want, if the state changes in AsyncNotifierProvider1, UI should get notified too via AsyncNotifierProvider2. I don't want UI to listen to AsyncNotifierProvider1 directly by calling ref.watch(...). Is it possible to implement?

[moxiaov587]

I'm doing that now.

@riverpod
Future<List<int>> intListFuture(IntListFutureRef ref) async {
  await Future.delayed(const Duration(seconds: 1));

  if (Random().nextInt(2).isOdd) {
    throw Exception('int oops');
  }

  return List.generate(10, (index) => index);
}

@riverpod
Future<String> stringFuture(StringFutureRef ref) async {
  await Future.delayed(const Duration(seconds: 2));

  if (Random().nextInt(2).isOdd) {
    throw Exception('string oops');
  }

  final data =
      await ref.watch(intListFutureProvider.selectAsync((data) => data));

  return (data[Random().nextInt(data.length)] * 20).toString();
}

class Child extends ConsumerWidget {
  const Child({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return ref.watch(stringFutureProvider).when(
          data: (data) => TextButton(
              onPressed: () {
                ref.invalidate(intListFutureProvider);
              },
              child: Text(data)),
          error: (e, s) => TextButton(
              onPressed: () {
                if (ref.read(intListFutureProvider).hasError) {
                  ref.invalidate(intListFutureProvider);
                } else {
                  ref.invalidate(stringFutureProvider);
                }
              },
              child: Text(e.toString())),
          loading: () => const Text('loading'),
        );
  }
}

[anidotnet]

This becomes problematic for me to implement when using AsyncNotifierProviders for a class that extends AsyncNotifier<T>.

Here is a code for demonstration

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

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

class MyApp extends ConsumerWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Example')),
        body: Center(
          child: CustomWidget(),
        ),
      ),
    );
  }
}

class CustomWidget extends ConsumerWidget {
  CustomWidget({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    var modelValue = ref.watch(demoRepoProvider);

    return modelValue.maybeWhen(
      data: (model) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('${model.number}'),
            const SizedBox(height: 30),
            ElevatedButton(
              onPressed: () {
               // simulate other background process modifying the state
                ref.read(demoServiceProvider.notifier).reset();
              },
              child: const Text("Reset"),
            ),
            const SizedBox(height: 30),
            ElevatedButton(
              onPressed: () {
               // simulate a background process modifying the state  
                Timer.periodic(const Duration(seconds: 1), (timer) {                   
                  ref.read(demoServiceProvider.notifier).updateCounter();
                });
              },
              child: const Text("Start Timer"),
            ),
          ],
        );
      },
      orElse: () => Container(),
    );
  }
}

class Model {
  final int number;

  const Model({required this.number});
}

// How to implement this?
class DemoRepo extends AsyncNotifier<Model> {
  @override
  Future<Model> build() async {
    var service = ref.watch(demoServiceProvider.notifier);
    return service.build();
  }

  Future<void> updateCounter() async {
    var service = ref.watch(demoServiceProvider.notifier);
    await service.updateCounter();
    // not working
    state = service.state;
  }

  Future<void> reset() async {
    var service = ref.watch(demoServiceProvider.notifier);
    await service.reset();
    // not working
    state = service.state;
  }
}

final demoRepoProvider = AsyncNotifierProvider<DemoRepo, Model>(() {
  return DemoRepo();
});

class DemoService extends AsyncNotifier<Model> {
  // simulate local data store
  var _model = const Model(number: 1);

  @override
  Future<Model> build() async {
    return const Model(number: 1);
  }

  Future<void> updateCounter() async {
    state = const AsyncValue.loading();
    state = await AsyncValue.guard(() async {
      _model = Model(number: _model.number + 1);
      return _model;
    });
  }

  Future<void> reset() async {
    _model = const Model(number: 1);
    state = AsyncValue.data(_model);
  }
}

final demoServiceProvider = AsyncNotifierProvider<DemoService, Model>(() {
  return DemoService();
});

[moxiaov587]

I've improved your code and it works now. You can compare the differences, at the moment it looks like you've made things a bit complicated, I think you could take another look at the documentation.

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

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

class MyApp extends ConsumerWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Example')),
        body: Center(
          child: CustomWidget(),
        ),
      ),
    );
  }
}

class CustomWidget extends ConsumerStatefulWidget {
  const CustomWidget({super.key});

  @override
  ConsumerState<CustomWidget> createState() => _CustomWidgetState();
}

class _CustomWidgetState extends ConsumerState<CustomWidget> {
  Timer? _timer;

  @override
  void dispose() {
    _timer?.cancel();
    _timer = null;
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Consumer(
          builder: (context, ref, child) {
            return ref.watch(demoRepoProvider).maybeWhen(
                data: (model) {
                  return Text('${model.number}');
                },
                orElse: () => Container());
          },
        ),
        const SizedBox(height: 30),
        ElevatedButton(
          onPressed: () {
            // simulate other background process modifying the state
            _timer?.cancel();
            ref.read(demoServiceProvider.notifier).reset();
          },
          child: const Text("Reset"),
        ),
        const SizedBox(height: 30),
        ElevatedButton(
          onPressed: () {
            // simulate a background process modifying the state
            _timer?.cancel();
            _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
              ref.read(demoServiceProvider.notifier).updateCounter();
            });
          },
          child: const Text("Start Timer"),
        ),
      ],
    );
  }
}

/// You can look at it: https://docs-v2.riverpod.dev/docs/concepts/why_immutability
class Model {
  final int number;

  const Model({required this.number});

  @override
  int get hashCode => number;

  @override
  bool operator ==(Object other) {
    return other is Model && other.number == number;
  }
}

class DemoRepo extends AsyncNotifier<Model> {
  @override
  Future<Model> build() async {
    // Listen here.
    return ref.watch(demoServiceProvider.selectAsync((data) => data));
  }

  Future<void> updateCounter() async {
    var service = ref.read(demoServiceProvider.notifier);
    service.updateCounter();
    // don't need.
    // state = service.state;
  }

  Future<void> reset() async {
    var service = ref.read(demoServiceProvider.notifier);
    service.reset();
    // don't need.
    // state = service.state;
  }
}

final demoRepoProvider = AsyncNotifierProvider<DemoRepo, Model>(() {
  return DemoRepo();
});

class DemoService extends AsyncNotifier<Model> {
  @override
  Future<Model> build() async {
    return const Model(number: 1);
  }

  void updateCounter() {
    state.whenOrNull(data: (model) {
      state = AsyncValue.data(Model(number: model.number + 1));
    });
  }

  void reset() {
    state = const AsyncValue.data(Model(number: 1));
  }
}

final demoServiceProvider = AsyncNotifierProvider<DemoService, Model>(() {
  return DemoService();
});

[hpelitebook745G2]

@moxiaov587 @rrousselGit how about Dependency Injection? in my second AsyncNotifierProvider or my controller, i want to pass some dependencies (for now, my first AsyncNotifierProvider or my service) in the constructor, could you provide some example? I can't find any.

[moxiaov587]

If you have some more specific use case I think I can provide more help.