Riverpod监听自定义对象状态失效问题及最佳实践咨询

Riverpod 的 StateProvider 是通过对象引用的变化来触发 UI 重建的。你当前的代码中，修改的是现有 AppState 对象的属性，然后返回同一个对象——Riverpod 会认为状态没有发生变化，因此不会触发 UI 更新。

不需要单独拆分每个状态，以下两种方案都能解决问题：

方案1：将 AppState 改为不可变类，更新时返回新对象 #

把 AppState 的字段设为 final，并添加 copyWith 方法，每次更新状态时创建新的实例：

class AppState {
  final String strSearch;
  final bool playing;
  final bool searching;

  AppState({
    this.strSearch = "",
    this.playing = false,
    this.searching = false,
  });

  // 复制方法，仅修改需要更新的字段，返回新实例
  AppState copyWith({
    String? strSearch,
    bool? playing,
    bool? searching,
  }) {
    return AppState(
      strSearch: strSearch ?? this.strSearch,
      playing: playing ?? this.playing,
      searching: searching ?? this.searching,
    );
  }
}

var appStateProvider = StateProvider<AppState>((ref) {
  return AppState();
});

更新状态的代码修改为：

// 点击搜索图标时
ref.read(appStateProvider.notifier).update((state) {
  return state.copyWith(searching: true); // 返回新对象
});

// 点击清除图标时
ref.read(appStateProvider.notifier).update((state) {
  return state.copyWith(searching: false);
});

方案2：改用 StateNotifierProvider（推荐用于复杂状态） #

StateNotifier 是 Riverpod 推荐的复杂状态管理方案，它强制开发者处理不可变状态，从根源避免引用不变导致的更新问题：

class AppState {
  final String strSearch;
  final bool playing;
  final bool searching;

  AppState({
    this.strSearch = "",
    this.playing = false,
    this.searching = false,
  });

  AppState copyWith({
    String? strSearch,
    bool? playing,
    bool? searching,
  }) {
    return AppState(
      strSearch: strSearch ?? this.strSearch,
      playing: playing ?? this.playing,
      searching: searching ?? this.searching,
    );
  }
}

class AppStateNotifier extends StateNotifier<AppState> {
  AppStateNotifier() : super(AppState());

  // 封装状态修改逻辑
  void toggleSearching(bool value) {
    state = state.copyWith(searching: value);
  }
}

final appStateProvider = StateNotifierProvider<AppStateNotifier, AppState>((ref) {
  return AppStateNotifier();
});

使用时的调用方式：

// 监听状态
AppState watchedState = ref.watch(appStateProvider);

// 更新状态
ref.read(appStateProvider.notifier).toggleSearching(true); // 开启搜索
ref.read(appStateProvider.notifier).toggleSearching(false); // 关闭搜索

不需要。将相关状态封装在 AppState 中统一管理更符合代码逻辑，也更便于维护。只有当各个状态完全独立、没有关联时，才考虑拆分到单独的 StateProvider。

内容的提问来源于stack exchange，提问作者Vaheed01