嵌套 AppState 的 Flutter 中减速器的最佳实践是什么

Question

Im wondering about the best practice for the AppState reducer, if the AppState holds Lists or other complex objects.

So an example:

Setting: Let's say, im writing a weight tracking app and for every weight entry, there's a date and comment attached. I want to display various things regarding the weight entries of the user, so i decided to lift them into the appstate. I decided to seperate them from the user data and hold them in a seperate list, to make the appstate as flat as possible and to seperate different aspects (user data, settings, weight entries).

Code:

AppState:

class AppState{
  //username, birthdate, etc.
  List<Entry> entries;
}

Entry:

class Entry{
  String userId;
  double weight;
  DateTime date;
  String comment;
}

2 Actions to modify/add an entry:

class UpdateCommentOnEntry{
  int index;
  String comment;
}

class AddEntry{
  Entry entry;
}

Task: What is the best way to handle this List in the AppState Reducer wrt. the 2 Actions?

Concerns: Performance and Memory Management on a mobile device. Basically i want to copy as least as possible.

Possible Solutions:

-1) As i understand, this solution is wrong/violates the Redux Standard, because it mutates the current state:

AppState reducer(AppState state, dynamic action) {
  if(action is UpdateCommentOnEntry){
    state.entries[action.index].comment=action.comment;
  } else if(action is AddEntry){
    state.entries.add(action.entry);
  }
  return state;
}

1) This solution copies the whole list

AppState reducer(AppState state, dynamic action) {
  if(action is UpdateCommentOnEntry){
    List<Entry> newList;
    for(int i = 0; i<state.entries.length; i++){
      if(i!=action.index){  
        newList.add(state.entries[i]);
      } else{
        newList.add(state.entries[i].copyWith(comment: action.comment));
      }
    } 
    return state.copyWith(entries = newList);
  } else if(action is AddEntry){
    List<Entry> newList = List<Entry>.from(state.entries);
    newList.entries.add(action.entry);
    return state.copyWith(entries: newList);
  } else {
    return state;
  }
}

2) This solution doesn't copy the list, but does copy the AppState, but it still references on the same list. And this List does get mutated, so is this also against the Redux Standard?

AppState reducer(AppState state, dynamic action) {
  if(action is UpdateCommentOnEntry){
    state.entries[i] = state.entries[i].copyWith(comment: action.comment);
    return state.copyWith(entries: state.entries);
  } else if(action is AddEntry){
    List<Entry> newList = List<Entry>.from(state.entries);
    newList.entries.add(action.entry);
    return state.copyWith(entries: newList);
  } else {
    return state;
  }
}

I'm just hesitating to copy the whole List every time i want to change a single entry. What is your solution, what are best practices here? Im thankfull for any advice.

Answer 1

In Redux, every part of your state should be immutable, but in dart lists are mutable by default.

So every time you pass a list to something, you will defensively copy your list to prevent accidental mutation of the list, won't you? ;-)

If your state would contain only immutable lists / sets / maps you could pass them around safely without copying them them every time you grant access to this list.

But I want do add something to this stupid immutable list, Well, you can't! It's immutable!

So you create a whole new immutable list that contains a copy of the old list plus the new item. But because this new list is immutable, you don't need to copy it every time you pass it around! That is what rescues the performance of your app! Copy once , pass it around without copying every time you want to use it.

Dart doesn't have a great way to create or work with immutable lists by its own. But - like for many other common problem - there is a great package for this purpose:

fast_immutable_collections

I think, the name describes perfectly, what is does!

Every list method, that would mutate the original list , instead returns a new immutable list .

Instead of List<MyType> myList you use IList<MyType> .

Instead of

state.entries[action.index].comment = action.comment;

You use

state.copyWith(entries: state.entries.replace(action.index, action.entry)

Instead of

state.entries.add(action.entry);

You use

state.copyWith(entries: state.entries.add(action.entry)

Creation of an IList is easy: [2, 5, 6].lock , for example, creates an IList containing the values [2, 5, 6] .

Immutability might seem to cost some performance, but usually it doesn't and even if it does, it is really worth it, Don't worry about any accidental mutation: just pass your immutable objects around to every thing that needs it, NO defensive copying any more. Less problems with race conditions in asynchronous code. ...

Ok, you will need a copyWith method for your immutable objects, but if you use redux, you will need this for your state any way!

And yes, there is a great package for immutable objects and generation of copyWith methods: freezed

You just need to define your properties inside a constructor and freezed will do the job for you.

It creates your fields, a copyWith method, equality operator + hashCode , toString method and even json serialization if you need it.

In addition, it gives you a great way to create and work with union types . Nice for state and action classes (or event classes, if you use bloc ).

redux + freezed + fast_immutable_collections = perfect match

(in my honest opinion!)

By the way: if you want to use mutable lists somewhere in your application, instead of copying every item in a for-loop, you can just write

myListCopy = [...myList];

And if you need a mutable copy of your IList myIList you can use myIList.unlock .