[Help] Handle success and error case with Riverpod.

[Trung15010802]

I don't know what the best practice is for showing a dialog if there's an error or success when performing a CRUD action.

Right now, I'm just returning a boolean variable to show a success or error dialog. However, I think I can do something better with Riverpod

class UserControllerNotifier extends AutoDisposeAsyncNotifier<List<User>> {
  @override
  FutureOr<List<User>> build() {
    return _fetchUsers();
  }

  UserRepository get _userRepo => ref.read(userRepositoryProvider);

  Future<List<User>> _fetchUsers() {
    return _userRepo.getUsers();
  }

  Future<bool> createUser({
    required String code,
    required String username,
    required String password,
    required String role,
  }) async {
    try {
      state = const AsyncLoading();
      await _userRepo.createUser(
        code: code,
        password: password,
        role: role,
        username: username,
      );
      state = await AsyncValue.guard(() => _fetchUsers());

      return true;
    } on Exception catch (_) {
      state = const AsyncValue.error('Có lỗi khi tạo user', StackTrace.empty);
      state = AsyncValue.data(state.value ?? []);
      return false;
    }
  }

  Future<bool> deleteUser({required String code}) async {
    try {
      await _userRepo.deleteUser(code);
      state = const AsyncLoading();
      state = await AsyncValue.guard(() => _fetchUsers());
      return true;
    } on Exception catch (_) {
      state = const AsyncValue.error('Có lỗi khi xoá user', StackTrace.empty);
      state = AsyncValue.data(state.value ?? []);
      return false;
    }
  }

  Future<void> deleteMultipeUsers({required List<String> codes}) async {
    try {
      await _userRepo.deleteMultipeUsers(codes);
      state = const AsyncLoading();
    } on Exception catch (_) {
      state = const AsyncValue.error('Có lỗi khi xoá user', StackTrace.empty);
    } finally {
      state = await AsyncValue.guard(() => _fetchUsers());
    }
  }

  Future<void> updateUser({
    required String code,
    required String role,
  }) async {
    try {
      await _userRepo.updateUser(code: code, role: role);
      state = const AsyncLoading();
      state = await AsyncValue.guard(() => _fetchUsers());
    } on Exception catch (e) {
      state = AsyncValue.error(e.toString(), StackTrace.empty);
      state = AsyncValue.data(state.value ?? []);
    }
  }

  Future<bool> updatePassword({
    required String oldPassword,
    required String password,
  }) async {
    try {
      state = const AsyncLoading();

      await _userRepo.updatePassword(
          oldPassword: oldPassword, password: password);
      return true;
    } on Exception catch (e) {
      state = AsyncValue.error(e.toString(), StackTrace.empty);
      return false;
    } finally {
      state = AsyncValue.data(state.value ?? []);
    }
  }
}

final userControllerProvider =
    AsyncNotifierProvider.autoDispose<UserControllerNotifier, List<User>>(
  UserControllerNotifier.new,
);

[Trung15010802]

Can anyone help me?

[kyawthet-wam]

You can find information on the side effects in this article's dedicated section.

https://medium.com/@kyawthetwam/flutter-pagination-with-performing-side-effects-in-riverpod-494a0b861532

[bizz84]

I think you can simplify your code a bit.

From this:

  Future<bool> deleteUser({required String code}) async {
    try {
      await _userRepo.deleteUser(code);
      state = const AsyncLoading();
      state = await AsyncValue.guard(() => _fetchUsers());
      return true;
    } on Exception catch (_) {
      state = const AsyncValue.error('Có lỗi khi xoá user', StackTrace.empty);
      state = AsyncValue.data(state.value ?? []);
      return false;
    }
  }

To this:

  Future<bool> deleteUser({required String code}) async {
     
      state = const AsyncLoading();
      state = await AsyncValue.guard(() async {
         await _userRepo.deleteUser(code);
         await _fetchUsers());
      });         
  }

With this change, if any of the async functions fail, your state will become an AsyncError (same as AsyncValue.error).

Then you can use ref.listen in your widget code to show an error dialog or snackbar:

class YourWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // error handling
    ref.listen<AsyncValue<void>>(
      userControllerProvider,
      (_, state) => /* show error if `state.hasError` */,
    );

Here's a complete article explaining this approach in more detail:

https://codewithandrea.com/articles/loading-error-states-state-notifier-async-value/

[Trung15010802]

I think you can simplify your code a bit.

From this:

  Future<bool> deleteUser({required String code}) async {
    try {
      await _userRepo.deleteUser(code);
      state = const AsyncLoading();
      state = await AsyncValue.guard(() => _fetchUsers());
      return true;
    } on Exception catch (_) {
      state = const AsyncValue.error('Có lỗi khi xoá user', StackTrace.empty);
      state = AsyncValue.data(state.value ?? []);
      return false;
    }
  }

To this:

  Future<bool> deleteUser({required String code}) async {
     
      state = const AsyncLoading();
      state = await AsyncValue.guard(() async {
         await _userRepo.deleteUser(code);
         await _fetchUsers());
      });         
  }

With this change, if any of the async functions fail, your state will become an AsyncError (same as AsyncValue.error).

Then you can use ref.listen in your widget code to show an error dialog or snackbar:

class YourWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // error handling
    ref.listen<AsyncValue<void>>(
      userControllerProvider,
      (_, state) => /* show error if `state.hasError` */,
    );

Here's a complete article explaining this approach in more detail:

https://codewithandrea.com/articles/loading-error-states-state-notifier-async-value/

Thank for your reply. But if i do that way, if an error occur, the UI will show the error not the previous list

[bizz84]

@Trung15010802 you should still be able to access the previous value even when there's an error.

Read this for details:

https://chooyan.hashnode.dev/why-we-need-asyncvalue-of-riverpod

[Trung15010802]

@Trung15010802 you should still be able to access the previous value even when there's an error.

Read this for details:

https://chooyan.hashnode.dev/why-we-need-asyncvalue-of-riverpod

Hmm. Yes it is pefect for error message. But What about success case and i wanna show success message?