[React] firestoreConnect - HOC that manages attaching and detaching listeners for you as the component mounts and unmounts.

authActions

export const signIn = (credentials) => {
  return (dispatch, getState, { getFirebase }) => {
    const firebase = getFirebase()
    firebase.auth().signInWithEmailAndPassword(
      credentials.email,
      credentials.password
    ).then(() => {
      dispatch({ type: 'LOGIN_SUCCESS' })
    }).then((error) => {
      dispatch({ type: 'LOGIN_ERROR', error })
    })
  }
}

fbConfig

// Using Firestore and Auth feature

import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'

//----------------------------------------------------
// Initialize Firebase (copy from firebase dashboard)
var config = {
  apiKey: "your api key",
  authDomain: "marioplan-6dd66.firebaseapp.com",
  databaseURL: "https://marioplan-6dd66.firebaseio.com",
  projectId: "marioplan-6dd66",
  storageBucket: "marioplan-6dd66.appspot.com",
  messagingSenderId: "1083091140770"
};
firebase.initializeApp(config);
//----------------------------------------------------

firebase.firestore().settings({ timestampsInSnapshots: true })

export default firebase

How to sync Firestore in React

// Component

import { compose } from 'redux'
import { connect } from 'react-redux'
import { firestoreConnect } from 'react-redux-firebase'

const mapStateToProps = (state, ownProps) => {
 return {
  projects: state.firestore.ordered.projects
 }
}

export default compose(
 firestoreConnect(['projects']), // or { collection: 'projects' }
 connect(mapStateToProps)
)(ThisComponent)

index

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createStore, applyMiddleware, compose } from "redux";
import rootReducer from './reducers/rootReducer';
import { Provider } from "react-redux";
import thunk from 'redux-thunk'
import { reactReduxFirebase, getFirebase } from "react-redux-firebase";
import { reduxFirestore, getFirestore } from "redux-firestore";
import fbConfig from './config/fbConfig'

const store = createStore(rootReducer,
  compose(
    applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
    reactReduxFirebase(fbConfig, {
      attachAuthIsReady: true,
      firebaseStateName: 'firebase'
    }),
    reduxFirestore(fbConfig)
  )
)

// Render dom once Firebase Auth is ready
// which means, website shows after firebase authentication logic is finished
// otherwise signIn button would show while firebase auth is still being executed even if user is already signed in.
// use together with..
// reactReduxFirebase(fbConfig, { attachAuthIsReady: true })
store.firebaseAuthIsReady.then(() => {
  ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('root'));
})

projectActions

// Example for creating new project (project was received by dispatch from component)

export const createProject = project => {
  return (dispatch, getState, { getFirebase, getFirestore }) => {
    // make async call to database
    const db = getFirestore()
    db.collection('projects').add({
      ...project,
      firstName: "Jihee",
      lastName: "Chung",
      authorId: "123",
      createdAt: new Date()
    }).then(() => {
      dispatch({ type: 'CREATE_PROJECT', project })
    }).catch((err) => {
      dispatch({ type: 'CREATE_PROJECT_ERROR', err })
    })
  }
}

rootReducer

// Change "project" to working data

import authReducer from './authReducer'
import projectReducer from './projectReducer'
import { combineReducers } from 'redux'
import { firestoreReducer } from "redux-firestore";
import { firebaseReducer } from "react-redux-firebase";

// firestore reducer is for syncing our firestore data with our state in the background
// so that state has firestore props and Components can access firestore data from state

// firebase reducer is for syncing firebase auth
// so that you can track user status in any page

const rootReducer = combineReducers({
  auth: authReducer,
  project: projectReducer,
  firestore: firestoreReducer,
  firebase: firebaseReducer
})

export default rootReducer