Upgrade to Pro — share decks privately, control downloads, hide ads and more …

今更Riverpod2.0について調べて発表する

Kuroneko-mayuge
September 23, 2023

 今更Riverpod2.0について調べて発表する

今更Riverpod2.0について調べて発表する

Kuroneko-mayuge

September 23, 2023
Tweet

More Decks by Kuroneko-mayuge

Other Decks in Business

Transcript

  1. v2.0 以降のProvider の種類 Provider 概要 NotifierProvider v2.0から登場。メインの機能 AsyncNotifierProvider v2.0から登場。FutureProviderではできない状態の変更が可能 Provider

    これまで通り。Repositoryなどの状態を持たないケースで利用 StateProvider NotifierProviderより非常に単純な場合。レガシー? StateNotifierProvider NotifierProviderを推奨と明記されている FutureProvider AsyncNotifierProviderを使うほどでもない、状態の変更を伴わない単純なユースケース StreamProvider FutureProviderのStream版 ChangeNotifier 元々非推奨。ChangeNotifierProviderからの置き換えの手始めに最も簡単。
  2. 初期値の設定を わかりやすく実装しやすい ここで、 ref.watch(otherProvider) などと、 他のprovider を参照できる 状態を変更するメソッドを UI に公開する

    code generation によって NotifierProvider が生成される watch で監視しておくと便利 part 'main.g.dart'; @riverpod class Todos extends _$Todos { @override List<Todo> build() { return [ Todo(description: 'Learn Flutter', completed: true), Todo(description: 'Learn Riverpod'), ]; } void addTodo(Todo todo) { state = [...state, todo]; } } flutter pub run build_runner watch コード自動生成のための ファイル名とアノテーション
  3. class TodoListView extends ConsumerWidget { const TodoListView({super.key}); @override Widget build(BuildContext

    context, WidgetRef ref) { List<Todo> todos = ref.watch(todosProvider); return ListView( children: [ for (final todo in todos) CheckboxListTile( value: todo.completed, onChanged: (value) => ref.read(todosProvider.notifier).toggle(todo.id), title: Text(todo.description), ), ], ); } } UI 側の利用は特に変更なし UI 側でstate の値をwatch UI 側からstate を変更する
  4. // Riverpod 1系 final fetchUserProvider = FutureProvider.autoDispose.family<User, int>((ref, userId) async

    { final json = await http.get('api/user/$userId'); return User.fromJson(json); }); // Riverpod 2系 @riverpod Future<User> fetchUser(FetchUserRef ref, {required int userId, required int page}) async { final json = await http.get('api/user/$userId/$page'); return User.fromJson(json); } autoDispose がデフォルトでON になった ( 破棄せず保持したい時はkeepAlive:true と明示する) 引数を1 個しか設定できなかったのが、任意で追加できるようになった