Hot takes

All his components are just functions aka "stateless components". They just take some props and render a component (html). The actions are passed as arguments.

There are constructors either.

Containers

Containers wrap around components (again components are stateless) and subscribe to changes from Redux. They don't do anything, but when Redux changes, they pass in new props to the components.

There are only three containers for this app, an example:

  //	****		ApplicationContainer.js		****

import { connect } from 'react-redux';
import Application from '../components/Application';
import { signIn, signOut } from '../actions/auth';


const mapStateToProps = ({ auth }) => {
  return { auth };
};

const mapDispatchToProps = (dispatch) => {
  return {
    signIn() { dispatch(signIn()); },
    signOut() { dispatch(signOut()); }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Application);

The above shows the example of forwarding the dispatch function down to the component.

Reducers

For example:

  //	****		auth.js		****

import initialState from '../initial-state.js';

export default function authReducer(state = initialState.auth, action) {
  switch(action.type) {
    case 'ATTEMPTING_LOGIN':
      return {
        status: 'AWAITING_AUTH_RESPONSE'
      };
    case 'SIGN_OUT':
      return {
        status: 'ANONYMOUS',
        email: null,
        displayName: null,
        photoURL: null,
        uid: null
      };
    case 'SIGN_IN':
      return {
        status: 'SIGNED_IN',
        email: action.email,
        displayName: action.displayName,
        photoURL: action.photoURL,
        uid: action.uid
      };
    default:
      return state;
  }
}