😊

riverpod公式で学んだことーStateNotifierProvider編

2023/01/07に公開

Flutter

はじめに

前回記事の続きです

前回はStateProviderについてまとめました。今回はStateNotifierProviderについてです。
riverpod 公式(https://riverpod.dev/docs/providers/state_notifier_provider/)

StateNotifierProvider

StateNotifierProviderは、ユーザーの行動によって変化する状態を管理する方法として、公式が推奨しているプロバイダー

以下のようなデータを扱う際に使用する

ユーザーの行動によって何度も変化する、可変のデータを扱う際
ビジネスロジックをまとめて管理する際

StateNotifierProviderはデータモデル(Class)とStateNotifierと一緒に使います。データはClassになってなくてもいいですがClassを扱う場合が多いと思います。
　StateNotifierProviderの特徴は、データとそのデータに対する操作がひとまとめになってる事だと思います。オブジェクト指向的なプロバイダーです。

例：StateNotifierProviderの例

model

class Todo {
  const Todo({required this.id, required this.description, required this.completed}


  final String id;
  final String description;
  final bool completed;

  Todo copyWith({String? id, String? description, bool? completed}) {
    return Todo(
      id: id ?? this.id,
      description: description ?? this.description,
      completed: completed ?? this.completed,
    );
  }
}

StateNotifier

class TodosNotifier extends StateNotifier<List<Todo>> {
  TodosNotifier(): super([]);

  void addTodo(Todo todo) {
    state = [...state, todo];
  }

  void removeTodo(String todoId) {
    state = [
      for (final todo in state)
        if (todo.id != todoId) todo,
    ];
  }

  void toggle(String todoId) {
    state = [
      for (final todo in state)
        if (todo.id == todoId)
      todo.copyWith(completed: !todo.completed)
        else
          todo,
    ];
  }
}

StateNotifierProvider

final todosProvider = StateNotifierProvider<TodosNotifier, List<Todo>>((ref) {
  return TodosNotifier();
});

riverpod公式のコーディング例です。特徴的な部分は、StateNotifierが扱うデータは、１つの要素の挿入・削除といった事ができないため、state = [...state, todo];のような書き方になる事です

はじめに

StateNotifierProvider

Discussion