AppState Model

The next step is define out AppState class. This is an arbitrary name, by the way. Some things in Redux do require specific names, but this isn't one of 'em.

The AppState is basically the Model for our entire application's state. Any thing in your app that can have different values should have a property in your AppState.

First, create the file where we'll build AppState:

  1. // lib folder:
  2. - models                                                        // new
  3.     - app_state.dart                                            // new
  4. - pages
  5.     - home_page.dart
  6. main.dart

The AppState class is just a plain Dart class, with no extensions. It doesn't need anything from Flutter or Redux.

We're building an app that's only functionality is that it can create a counter. So, we're going to need to keep track of that count.

  1. // models/app_state.dart
  2. class AppState {
  3.   final int count;
  5.   // constructor
  6.   // use curlies to denote named parameters
  7.   AppState({this.count = 0});
  9. }

That's the basic class that simply keeps track of our state. For Redux purposes, we'll add some methods we need:

NB: I added 'isLoading', although we don't need it right now. It's more obvious what AppState will be as it grows when there's more than one property.

  1. // models/app_state.dart
  2. class AppState {
  3.   final int count;
  4.   final bool isLoading;
  6.   AppState({this.count = 0, this.isLoading = false});
  8.     AppState copyWith({int count, bool isLoading}) {
  9.         return new AppState(
  10.             count: count ?? this.count,
  11.             isLoading: isLoading ?? this.isLoading
  12.         );
  13.     }
  15.     @override
  16.     String toString() {
  17.         return 'AppState{isLoading: $isLoading, count: $count}';
  18.     }
  19. }

copyWith?

This is a function that allows us to create a new state with updated values. With this method, we never have to directly modify current state. This is ideal. State should be read-only in Redux. When it's read only and we're specifically updating it with pure functions from the reducer, we're eliminating the risk of unintended side affects in the app.

Go back to main.dart and import your AppState. Now we need to address reducers in order unbreak your app: