We we'll implement the user.

1. sign in action
2. the sign in process and it's two branch (success, failure)

  //	****		index.js		****

import React from 'react';
import ReactDOM from 'react-dom';
import { applyMiddleware, compose, createStore } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import reducer from './reducers';
import initialState from './initial-state';
import Application from './containers/ApplicationContainer';
import './index.css';

const middleware = [ thunk ];
const enhancers = [];
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
  reducer,
  initialState,
  composeEnhancers(
    applyMiddleware(...middleware),
    ...enhancers
  )
);

ReactDOM.render(
  <Provider store={store}>
    <Application />
  </Provider>,
  document.getElementById('root')
);

He's using middlewares :

redux-thunk : can return a function as a result of an action that can later dispatch another action.
redux-devtools

Update sign in

This will be an asynchronous action. (on success will dispatch another action) First just get an async action working with a simple setTimeout.

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

export const signIn = () => {
  // ****  ---- 1. remove the harcoded values.  ↴
  // return {
  //   type: 'SIGN_IN',
  //   email: 'bill@example.com',
  //   displayName: 'Bill Murray',
  //   photoURL: 'http://www.fillmurray.com/200/200',
  //   uid: 'firstUser'
  // };
  // **** 2 use the dispatch from redux-thunk.  ↴
  return dispatch => {
    // **** 3. just dispatch at firt try. (immediate return) ↴
    dispatch({type: 'ATTEMPINT_LOGIN' })
    // **** 4 now async.  ↴
    setTimeout( () => {
      dispatch({
        type: 'SIGN_IN',
        email: 'bill@example.com',
        displayName: 'Bill Murray',
        photoURL: 'http://www.fillmurray.com/200/200',
        uid: 'firstUser'
      })
    }, 2000)
  }
};

export const signOut = () => {
  // **** 5 do the same for sign out.  ↴
  // return {
  //   type: 'SIGN_OUT'
  // };
  // **** 6 async logout.  ↴
  setTimeout(() => {
    dispatch({
      type: 'SIGN_OUT'
    })
  } , 2000)
};

The dispatch from redux-thunk is a delayed notifier.

Use Firebase for authentication

He will use the Promise API.

  //	****		actions/auth.js		****
// **** 1 add these.  ↴

// these are just for formatting the data

export const signedIn = user => {
  return  {
    {
      type: 'SIGN_IN',
      email: user.email,
      displayName: user.displayName,
      photoURL: user.photoURL,
      uid: user.uid
    }
  }
};

export const signedOut = () => {
  return {
      type: 'SIGN_OUT'
    }
};

Authenticate with Firebase

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

// **** 1. import some libraries.  ↴
import { auth, googleAuthProvider } from '../firebase'

export const signIn = () => {
  return dispatch => {
    dispatch({type: 'ATTEMPINT_LOGIN' })
    // **** 2 sign in with the popup.  ↴
    auth.signInWithPopup(googleAuthProvider).then(({user}) => {
      dispatch(signedIn(user)) // sigendIn formmatter is just above...
    })
  }
};

export const signOut = () => {
  // **** 3 sign out.  ↴
  auth.signOut().then(() => {
    dispatch(signedOut())
  })
};