We still need to listen to the user refs and messages.

App > Redux > Firebase > Redux > App

  //	****		actions/users.js		****
// **** 2.  ↴
import {database} from '../firebase'

// **** 3.  ↴
const usersRef = database.ref('users')

export const addUser = (user) => {
  return {
    type: 'ADD_USER',
    displayName: user.displayName,
    uid: user.uid,
    photoURL: user.photoURL
  };
};

// **** 1.  ↴
export const startListeningForUsers = () => {
  return (dispatch) => {
    usersRef.on('child_added', snapshot => {
      dispatch(addUser(snapshot.val()))
    })
  }
}

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

import { auth, database,  googleAuthProvider } from '../firebase'

// **** 1.  ↴
const usersRef = database.ref('users')

export const signIn = () => {
  return dispatch => {
    dispatch({type: 'ATTEMPINT_LOGIN' })
    auth.signInWithPopup(googleAuthProvider)
  }
};

export const signOut = () => {
  auth.signOut().then(() => {
    auth.signOut()
  })
};

export const startListeningToAuthChanges = () => {
  return dispatch => {
    auth.onAuthStateChanged(user => {
      if (user) {
        dispatch(signedIn(user))
        // **** 2.  ↴
        usersRef.child(user.uid).set(pick(user, ['displayName', 'photoURL', 'email', 'uid'])
      } else {
        dispatch(signedOut())
      }
    })  
  }
}

We still use the listeners

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

import React from 'react';
import ..

import {startListeningToAuthChanges} from './actios/auth'
// **** 1.  ↴
import { startListeningForUsers } from './actions/users'

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

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

store.dispatch(startListeningToAuthChanges())
// **** 2.  ↴
store.dispatch(startListeningForUsers())

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

Last step is messages...

Adding messages

We want to add Firebase to this code:

  //	****		actions/messages.js		****

// **** 1.  ↴
import { database } from '../firebase'

// **** 2.  ↴
const messagesRef = database.ref('messages')

export const addMessage = (key, { content, uid }) => {
  return {
    type: 'ADD_MESSAGE',
    content,
    key,
    timeStamp: Date.now(),
    uid
  };
};

export const removeMessage = (key) => {
  return {
    type: 'REMOVE_MESSAGE',
    key
  };
};

// **** 4 pull out content, uid.  ↴
export const createMessage = ({content, uid}) => {
  // **** 3. we need to return a function  ↴
  return dispatch => {
    const message = {
      content,
      uid,
      timeStamp: Date.now()
    }
    // **** 5 then push it onto the database.  ↴
    messagesRef.push(message)
  }
};

export const destroyMessage = (key) => {
  // **** 6. update this too  ↴
  return dispatch => {
    messagesRef.child(key)
    .remove()
    // to demo the Promise API :
    .then(() => {
      // remove the message from the UI ↴
      dispatch(removeMessage(key))
    })  
  }
};

// **** 7. finally, export the listener  ↴

export const startListeninigForMessages = () => {
  return dispatch => {
    // will listen for two things : ↴
    messagesRef.on('child_added', snapshot => {
      dispatch(addMessage(snapshot.key, snapshot.val()))
    })
    
    messagesRef.on('child_removed', snapshot => {
      dispatch(remvoceMessage(snapshot.key))
    })
  }
}

Question: Does Firebase have a date function ?

• Not one that he is aware of

Finally, add the listener in index.js:

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

import React from 'react';
import ..

import {startListeningToAuthChanges} from './actios/auth'
import { startListeningForUsers } from './actions/users'
// **** 1. import the method  ↴
import { startListeninigForMessages } from './actions/messages'

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

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

store.dispatch(startListeningToAuthChanges())
store.dispatch(startListeningForUsers())
// **** 2. use it  ↴
store.dispatch(startListeninigForMessages())

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