LogIn Redux Cycle contd

Back to the Redux cycle.

So far, we've done this:

  • Add a new auth_actions file.
  • Add relevant actions.
  • Add Firebase middleware.

5. create file for Auth reducer: lib/reducers/auth_reducer.dart

4. Build Auth Reducer

  1. // reducers/auth_reducer.dart
  2. import 'package:firebase_auth/firebase_auth.dart';
  3. import 'package:me_suite/actions/auth_actions.dart';
  4. import 'package:redux/redux.dart';
  6. // This is a built in method for creating type safe reducers.
  7. // The alternative is building something the way we did with
  8. // the counter reducer -- a simple method.
  9. //
  10. // This is the preferred method and it allows us to create
  11. // modular functions that are safer.
  12. //
  13. final authReducer = combineTypedReducers<FirebaseUser>([
  14.         // create a reducer binding for each possible reducer--
  15.         // generally thered be one for each possible action a user
  16.         // will take.
  17.         // We'll pass in what a method, which takes a piece of
  18.         // application state and an action.
  19.         // In this case, auth methods take a user as the piece
  20.         // of state
  21.         //
  22.   new TypedReducer<FirebaseUser, LogInSuccessful>(_logIn),
  23.   new TypedReducer<FirebaseUser, LogOut>(_logOut),
  24. ]);
  26. // Create the actual reducer methods:
  27. //
  28. // this is dispatched from the LogIn middleware,
  29. // That middleware passes in the user and the action.
  30. // All the reducer needs to do is replace the slice of state
  31. // That handles user.
  32. //
  33. // *NB -- We haven't actually added a user to the state yet.
  34. FirebaseUser _logIn(FirebaseUser user, action) {
  35.   return action.user;
  36. }
  38. // This will just replace the user slice of state with null.
  39. Null _logOut(FirebaseUser user, action) {
  40.   return null;
  41. }

At this point in the Redux cycle, this is the flow:

  • Action is dispatched
  • LogIn middleware intercepts the action.
  • Middleware completes and sends the action to the appReducer.
  • appReducer calls all the sub-reducers, including authReducer, which is what we just wrote.The problem is that we haven't actually added this reducer to the appReducer

5. Add authReducer to appReducer

  1. // reducers/app_state_reducer.dart
  2. import 'package:me_suite/models/app_state.dart';
  3. import 'package:me_suite/reducers/auth_reducer.dart';        //new
  4. import 'package:me_suite/reducers/counter_reducer.dart';
  6. AppState appReducer(AppState state, action) {
  7.   return new AppState(
  8.       isLoading: false,
  9.       count: counterReducer(state.count, action),
  10.       currentUser: authReducer(state.currentUser, action));     //new
  11. }

So now when an action is dispatched, this reducer will know to perform auth actions as well.

There's only one problem:

We haven't actually updated the AppState class to be aware of users.

6. Add FirebaseUser to AppState

  1. // models/app_state.dart
  2. import 'package:firebase_auth/firebase_auth.dart';              //new
  4. class AppState {
  5.   final int count;
  6.   final bool isLoading;
  7.   final FirebaseUser currentUser;                               //new
  9.   AppState({
  10.     this.count = 0,
  11.     this.isLoading = false,
  12.     this.currentUser,                                           //new
  13.   });
  15.   AppState copyWith({int count, bool isLoading}) {
  16.     return new AppState(
  17.       count: count ?? this.count,
  18.       isLoading: isLoading ?? this.isLoading,
  19.       currentUser: currentUser ?? this.currentUser,             // new
  20.     );
  21.   }
  23.   @override
  24.   String toString() {                                           // changed
  25.     return 'AppState{isLoading: $isLoading, count: $count, currentUser: $currentUser}';
  26.   }
  27. }

At this point, your Redux cycle is complete. Execept we don't have a way to make that cycle start.

7. Add needed files for Containers and Views

  1. // lib folder:
  2. - actions
  3.     - auth_actions.dart
  4.     - counter_actions.dart
  5. - containers
  6.     - auth_button                                                 // new
  7.         - auth_button_container.dart                                // new
  8.         - google_auth_button.dart                                   // new
  9.     - counter
  10.         - counter.dart
  11.         - increase_counter.dart
  12. - models
  13.     - app_state.dart
  14. - pages
  15.     - home_page.dart
  16. - reducers
  17.     - auth_reducer.dart
  18.     - app_reducer.dart
  19.     - counter_reducer.dart
  20. main.dart

8. Implement AuthButtonContainer

NB: This the first time we'll get to see a true smart container and dumb widget relationship.

The smart container interacts with the store, and then simply passes the correct data to the dumb widget to display.

This is the smart component, it'll have access to the Store.

  1. // containers/auth_button/auth_button_container.dart
  2. import 'package:flutter/material.dart';
  3. import 'package:flutter_redux/flutter_redux.dart';
  4. import 'package:me_suite/actions/auth_actions.dart';
  5. import 'package:me_suite/models/app_state.dart';
  6. import 'package:me_suite/containers/auth_button/google_auth_button.dart';
  7. import 'package:redux/redux.dart';
  9. class GoogleAuthButtonContainer extends StatelessWidget {
  10.   GoogleAuthButtonContainer({Key key}) : super(key: key);
  12.   @override
  13.   Widget build(BuildContext context) {
  14.       // Connect to the store:
  15.     return new StoreConnector<AppState, _ViewModel>(
  16.       converter: _ViewModel.fromStore,
  17.       builder: (BuildContext context, _ViewModel vm) {
  18.           // We haven't made this yet.
  19.         return new GoogleAuthButton(
  20.           buttonText: vm.buttonText,
  21.           onPressedCallback: vm.onPressedCallback,
  22.         );
  23.       },
  24.     );
  25.   }
  26. }
  28. class _ViewModel {
  29.   final String buttonText;
  30.   final Function onPressedCallback;
  32.   _ViewModel({this.onPressedCallback, this.buttonText});
  34.   static _ViewModel fromStore(Store<AppState> store) {
  35.       // This is a bit of a more complex _viewModel
  36.       // constructor. As the state updates, it will
  37.       // recreate this _viewModel, and then pass
  38.       // buttonText and the callback down to the button
  39.       // with the appropriate qualities:
  40.       //
  41.     return new _ViewModel(
  42.         buttonText:
  43.         store.state.currentUser != null ? 'Log Out' : 'Log in with Google',
  44.         onPressedCallback: () {
  45.           if (store.state.currentUser != null) {
  46.             store.dispatch(new LogOut());
  47.           } else {
  48.             store.dispatch(new LogIn());
  49.           }
  50.         });
  51.   }
  52. }

9. Add GoogleAuthButton widget

This is just a dumb widget. All it does is take in the data from its container, and then displays the proper data.

There are some Flutter things here that we've not yet seen:

  • RaisedButton component
  • Images
  • Layout things like padding, width, and height
  • Row widget
  • TextAlign

All are addressed in the comments below, but all Flutter layout issues will be addressed in much more depth after the Firebase section.

  1. import 'package:flutter/material.dart';
  2. import 'package:meta/meta.dart';
  4. class GoogleAuthButton extends StatelessWidget {
  5.   final String buttonText;
  6.   final Function onPressedCallback;
  8.     // Passed in from Container
  9.   GoogleAuthButton({
  10.     @required this.buttonText,
  11.     this.onPressedCallback,
  12.   });
  14.   @override
  15.   Widget build(BuildContext context) {
  16.       // Raised button is a widget that gives some
  17.       // automatic Material design styles
  18.     return new RaisedButton(
  19.       onPressed: onPressedCallback,
  20.       color: Colors.white,
  21.       child: new Container(
  22.           // Explicitly set height
  23.           // Contianer has many options you can pass it,
  24.           // Most widgets do *not* allow you to explicitly set
  25.           // width and height
  26.         width: 230.0,
  27.         height: 50.0,
  28.         alignment: Alignment.center,
  29.         // Row is a layout widget
  30.         // that lays out its children on a horizontal axis
  31.         child: new Row(
  32.           mainAxisAlignment: MainAxisAlignment.center,
  33.           children: [
  34.               // Padding is a convenience widget that adds Padding to it's child
  35.             new Padding(
  36.               padding: const EdgeInsets.only(right: 20.0),
  37.               // Image, like everyhting, is just a class.
  38.               // This constructor expects an image URL -- I found this one on Google
  39.                              child: new Image.network(
  40.                 'https://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png',
  41.                 width: 30.0,
  42.               ),
  43.             ),
  44.             new Text(
  45.               buttonText,
  46.               textAlign: TextAlign.center,
  47.               style: new TextStyle(
  48.                 fontSize: 16.0,
  49.               ),
  50.             ),
  51.           ],
  52.         ),
  53.       ),
  54.     );
  55.   }
  56. }

10. Finally, add LogIn button to app

Let's add our button container to our HomePage:

  1. // pages/home_page.dart
  2. ...
  4. Widget build(BuildContext context) {
  5.     return new Scaffold(
  6.       appBar: new AppBar(
  7.         title: new Text(this.title),
  8.       ),
  9.       body: new Container(
  10.         child: new Center(
  11.           child: new Column(
  12.             mainAxisAlignment: MainAxisAlignment.center,
  13.             children: <Widget>[
  14.                             new GoogleAuthButtonContainer(),                                    // new
  15.               new Text(
  16.                 'You have pushed the button this many times:',
  17.               ),
  18.               new Counter(),
  19.             ],
  20.           ),
  21.         ),
  22.       ),
  23.       floatingActionButton: new IncreaseCountButton()
  24.     );
  25.   }

Once that's added in, restart your app, press 'LogIn with Google' and you should be walked through the LogIn OAuth process.

Also, if all is working properly, the button now says 'Log Out'!