Add a Redux Store

The Redux store is where all your application state lives in Redux apps.

The Store is basically a widget that stands at the top of the widget tree and passes it's data down using special Redux methods.

First, lets simply create a new Store. Like most things in OOP, it's just a class that you wanna establish a new instance of:

  1. // main.dart
  2. import 'package:flutter/material.dart';
  3. import 'package:redux/redux.dart';                              // new
  4. import 'package:flutter_redux/flutter_redux.dart';              // new
  5. import 'package:me_suite/pages/home_page.dart';
  7. void main() => runApp(new MainApp());
  9. class MainApp extends StatelessWidget {
  10.   String title = 'MeSuite';
  11.     //
  12.     // Store is just a class that holds your apps State tree.
  13.     // AppState is something that we will (but haven't yet) established
  14.   final store = new Store<AppState>(                            // new
  15.     appReducer,                                                 // new
  16.     initialState: new AppState(),                               // new
  17.     middleware: [],                                             // new
  18.   );
  20.   @override
  21.   Widget build(BuildContext context) {
  22.     return new MaterialApp(
  23.       title: title,
  24.       home: new HomePage(title),
  25.     );
  26.   }
  27. }

Let's break that down line by line starting at final store = …

  • AppState, again, is a class that we will build which is where all your application state will live. It's basically your states model.

  • The Store constructor expects (or accepts) a handful of arguments:

    • A reducer: this is another class we haven't created yet, and we'll cover it in depth in the reducer lesson. Just know that a reducer is the only thing that can update your AppState.
    • initialState is your apps… initial state. We'll cover this more indepth in the AppState lesson.
    • middleware is optional, but you'll most likely always use it. It's a list of functions that Redux knows to call before the reducer updates state. For example, you may need to make an http request to log in a user before you update your states 'currentUser'. You'd do this in middleware.

NB: this is a good place to say that the Redux process should be completely synchronous, except in the middleware. Any kind of async calls you need to make should be done in a middleware function. Here's a nice visual from Ignacio Chavezredux flow

The second part of adding a Redux Store is passing the Store to all children in the Widget tree. This should be done at the root level of your Flutter App.

  1. // main.dart
  2. import 'package:flutter/material.dart';
  3. import 'package:redux/redux.dart';
  4. import 'package:flutter_redux/flutter_redux.dart';
  5. import 'package:me_suite/pages/home_page.dart';
  7. void main() => runApp(new MainApp());
  9. class MainApp extends StatelessWidget {
  10.   String title = 'MeSuite';
  11.   final store = new Store<AppState>(
  12.     appReducer,
  13.     initialState: new AppState(),
  14.     middleware: [],
  15.   );
  17.   @override
  18.   Widget build(BuildContext context) {
  19.     // Wrap your MaterialApp in a StoreProvider
  20.     return new StoreProvider(                                   // new
  21.       store: store,                                             // new
  22.       child: new MaterialApp(
  23.           title: title,
  24.           home: new HomePage(title),
  25.       ),
  26.     );
  27.   }
  28. }

So that's pretty much it for passing the store down to all the widgets. Later, we'll look at the special widgets that allow us to access that store and make Redux do work for us.

NB: Right now, your app will fail. Don't worry about bugs at the moment.