Example of reflecting state updates across screens about riverpod

[scopendo]

A similar question would be reflecting state changes when both the TodoList and Todo are state (or change) notifiers. It might be that the action of updating a todo's data belongs in a Todo state notifier so that subscribed widgets for that todo can rebuild, but we also need the todo state within the TodoList to be updated.

[rrousselGit]

The important thing is to have a single source of truth. So you should make sure that both todo-lists obtain their todos from same source.

This could be done by having a "family" for all todos.
Since you want them to be editable, you could use a StateNotifierProviderFamily, and have the argument be the todo ID:

class TodoNotifier extends StateNotifier<Todo> {
  TodoNotifier(String id): super(Todo(id: id));

  void updateDescription(String description) {
    state = state.copyWith(description: description);
  }
}

final todoFamily = StateNotifierProviderFamily<TodoNotifier, String>((ref, id) {
  return TodoNotifier(id);
});

From there, the provider for your home and for the other screen should both use todoFamily to obtain their todos.
In the ideal world, they should both be a Computed. Otherwise, you can make them a state/change notifier, and they should use TodoNotifier.addListener to keep track of changes on individual todos.

This way, both lists obtain their todos from the same source, which means that when a todo is updated, both lists will have the update.

[rrousselGit]

To expand on the previous point of having a single source of truth, it would make sense for your "home" and "other screen" lists to only store the id of a todo, not the todo itself.

So we would have:

final homeList = StateNotifierProvider((ref) => HomeList());

class HomeList extends StateNotifier<List<String>> {
  HomeList(this.ref): super([]);

  final ProviderReference ref;

  void addTodo(String description) {
    final newTodoId = _uuid.v4();

    // Initialize the new todo
    final todoNotifier = ref.read(todoFamily(newTodoId));
    todoNotifier.updateDescription(description);

    // update the UI
    state = [...state, newTodoId];
  }
}

Then the list of IDs can be combined with todoFamily to obtain the todos. This could be done either in a Computed or inside a Consumer directly.

final ids = read(homeList.state);

final todos = [
  for (final id in ids)
    read(todoFamily(id).state)
];

Which would automatically update the UI both when the id list changes or when the content of a todo changes

[scopendo]

Thank you for these detailed answers @rrousselGit – I'm going to have to spend a bit of time understanding them, especially as I'm still using Provider rather than Riverpod.

[devon]

To expand on the previous point of having a single source of truth, it would make sense for your "home" and "other screen" lists to only store the id of a todo, not the todo itself.

So we would have:

final homeList = StateNotifierProvider((ref) => HomeList());

class HomeList extends StateNotifier<List<String>> {
  HomeList(this.ref): super([]);

  final ProviderReference ref;

  void addTodo(String description) {
    final newTodoId = _uuid.v4();

    // Initialize the new todo
    final todoNotifier = ref.read(todoFamily(newTodoId));
    todoNotifier.updateDescription(description);

    // update the UI
    state = [...state, newTodoId];
  }
}

Then the list of IDs can be combined with todoFamily to obtain the todos. This could be done either in a Computed or inside a Consumer directly.

final ids = read(homeList.state);

final todos = [
  for (final id in ids)
    read(todoFamily(id).state)
];

Which would automatically update the UI both when the id list changes or when the content of a todo changes

In this case, how to determine homeList is already disposed, or todoFamily(todoId) is already disposed. (the list or the item is not on screen now)

Use case: need to know what list and items in screen (memory) if we push data from server to app.

[JuI3s]

To expand on the previous point of having a single source of truth, it would make sense for your "home" and "other screen" lists to only store the id of a todo, not the todo itself.
So we would have:

final homeList = StateNotifierProvider((ref) => HomeList());

class HomeList extends StateNotifier<List<String>> {
  HomeList(this.ref): super([]);

  final ProviderReference ref;

  void addTodo(String description) {
    final newTodoId = _uuid.v4();

    // Initialize the new todo
    final todoNotifier = ref.read(todoFamily(newTodoId));
    todoNotifier.updateDescription(description);

    // update the UI
    state = [...state, newTodoId];
  }
}

Then the list of IDs can be combined with todoFamily to obtain the todos. This could be done either in a Computed or inside a Consumer directly.

final ids = read(homeList.state);

final todos = [
  for (final id in ids)
    read(todoFamily(id).state)
];

Which would automatically update the UI both when the id list changes or when the content of a todo changes

In this case, how to determine homeList is already disposed, or todoFamily(todoId) is already disposed. (the list or the item is not on screen now)

Use case: need to know what list and items in screen (memory) if we push data from server to app.

Is there any update on this?

[JuI3s]

To expand on the previous point of having a single source of truth, it would make sense for your "home" and "other screen" lists to only store the id of a todo, not the todo itself.

So we would have:

final homeList = StateNotifierProvider((ref) => HomeList());

class HomeList extends StateNotifier<List<String>> {
  HomeList(this.ref): super([]);

  final ProviderReference ref;

  void addTodo(String description) {
    final newTodoId = _uuid.v4();

    // Initialize the new todo
    final todoNotifier = ref.read(todoFamily(newTodoId));
    todoNotifier.updateDescription(description);

    // update the UI
    state = [...state, newTodoId];
  }
}

Then the list of IDs can be combined with todoFamily to obtain the todos. This could be done either in a Computed or inside a Consumer directly.

final ids = read(homeList.state);

final todos = [
  for (final id in ids)
    read(todoFamily(id).state)
];

Which would automatically update the UI both when the id list changes or when the content of a todo changes

Would you provide an example of how to delete a todo item by its ID? Suppose we have two lists that fetch data from remote API but contain some overlapping todo items, and the user wants to delete an item so the change will be reflected in multiple todo lists.

Sorry I’m new to river-do and couldn’t seem to find a solution in the doc.