How to use redux-firestore - 10 common examples

getAvatar(){
        var that = this
        getFirestore().collection('users').doc(this.props.author).get()
        .then(function(doc) {
            if (doc.exists) {
                if(doc.data().photoURL !== undefined){
                    that.setState({
                        photoURL: doc.data().photoURL
                    })
                }else{
                    that.setState({
                        photoURL: null
                    })
                }
            } else {
                // doc.data() will be undefined in this case
                message.error("No such document!");
            }
        }).catch(function(error) {

userLiked: true,
                    amountOfLikes: this.state.amountOfLikes + 1
                })
                getFirestore().collection('stories').doc(this.props.id).update({
                    likes: firebase.firestore.FieldValue.arrayUnion(
                        this.props.auth.displayName
                    ),
                    likeCount: firebase.firestore.FieldValue.increment(1)
                })
            }else{
                this.setState({
                    userLiked: false,
                    amountOfLikes: this.state.amountOfLikes - 1
                })
                // Delete user from posts 'likes' collection
                getFirestore().collection('stories').doc(this.props.id).update({
                    likes: firebase.firestore.FieldValue.arrayRemove(
                        this.props.auth.displayName
                    ),
                    likeCount: firebase.firestore.FieldValue.increment(-1)
                })
            }
        }else{
            message.warning('Please login or sign up to like prompts')
        } 
    }

// We enhance compose in order to use Redux DevTools extension
// https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

// Create config for rrfProps object. We need this to pass it in the ReactReduxFirebaseProvider component
const rrfConfig = {
  useFirestoreForProfile: true, // Firestore for Profile instead of Realtime DB
  userProfile: 'users',
  attachAuthIsReady: true,
};

const store = createStore(rootReducer,
  composeEnhancers(
    applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
    reduxFirestore(firebase), // still need this line to get access to firestore via getFirestore function (in projectActions, for example)
  ));

const rrfProps = {
  firebase,
  config: rrfConfig,
  dispatch: store.dispatch,
  createFirestoreInstance, // Create firestore instead of craete it in fbConfig.js
};

ReactDOM.render(
  
    
      
    
  ,
  document.getElementById('root'),

// import { createLogger } from "redux-logger";

import { getFirebase, reduxReactFirebase } from "react-redux-firebase";
import { getFirestore, reduxFirestore } from "redux-firestore";

import allReducer from "./reducers";
import fbconfig from "../firebase/";

// const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const composeEnhancers = compose;
const enhancer = composeEnhancers(
  applyMiddleware(
    thunk.withExtraArgument({ getFirebase, getFirestore })
    // createLogger()
  ),
  reduxFirestore(fbconfig),
  reduxReactFirebase(fbconfig)
);
const store = createStore(allReducer, enhancer);

export default store;

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

const store = createStore(rootReducer, 
    compose(
        applyMiddleware(thunk.withExtraArgument({ getFirestore, getFirebase })),
        reduxFirestore(fbConfig),
        reactReduxFirebase(fbConfig, {attachAuthIsReady: true})
    )
);
store.firebaseAuthIsReady.then(() => {
    ReactDOM.render(
        
            
        , 
        document.getElementById('root'));
        serviceWorker.unregister();
})


// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA

import { sagaInjector, sagaMiddleware } from "../services/saga";
import rootReducer from "./reducer";
import { firebaseConfig } from "./config";

// react-redux-firebase config
const rrfConfig = {
  userProfile: "courseMembers", // firebase root where user profiles are stored
  profileParamsToPopulate: ["members:users"]
};

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

// Add reactReduxFirebase enhancer when making store creator
// Add reduxFirestore enhancer when making store creator
const createStoreWithFirebase = compose(
  reduxFirestore(firebaseConfig),
  reactReduxFirebase(firebaseConfig, rrfConfig)
)(createStore);

export const configureStore = (preloadedState, history) => {
  const middlewares = [
    sagaMiddleware,
    routerMiddleware(history),
    actionsService.catchAction
  ];
  const store = createStoreWithFirebase(
    connectRouter(history)(rootReducer),
    preloadedState,
    composeEnhancers(applyMiddleware(...middlewares))
  );
  sagaInjector.injections.map(injection => sagaMiddleware.run(injection));

// react-redux-firebase config
const rrfConfig = {
  userProfile: 'users',
  useFirestoreForProfile: true,
};

firebase.initializeApp(firebaseConfig);
firebase.firestore().settings({timestampsInSnapshots: true});

// Add reactReduxFirebase enhancer when making store creator
const createStoreWithFirebase = compose(
    applyMiddleware(
        routerMiddleware(history) // for dispatching history actions
    ),
    reduxFirestore(firebase),
    reactReduxFirebase(firebase, rrfConfig)
)(createStore);

const initialState = {
  projectEditorOpen: false,
};

// TODO: use HOFs like compose() instead.
// TODO: Move connectRouter into reducers.
// Create store with reducers and initial state
const store = createStoreWithFirebase(
    rootReducer, initialState, composeWithDevTools());

export default store;

const rrfConfig = {
  userProfile: 'users',
  useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB
};

// Init firebase instance
firebase.initializeApp(firebaseConfig);
// Init firestore
const firestore = firebase.firestore();
const settings = { timestampsInSnapshots: true };
firestore.settings(settings);

// Add reactReduxFirebase enhancer when making store creator
const createStoreWithFirebase = compose(
  reactReduxFirebase(firebase, rrfConfig), // firebase instance as first argument
  reduxFirestore(firebase)
)(createStore);

const rootReducer = combineReducers({
  firebase: firebaseReducer,
  firestore: firestoreReducer,
  notify: notifyReducer,
  settings: settingsReducer
});

// Check for settings in localStorage
if (localStorage.getItem('settings') == null) {
  // Default settings
  const defaultSettings = {
    disableBalanceOnAdd: true,
    disableBalanceOnEdit: false,
    allowRegistration: false

if (process.env.NODE_ENV === 'development') {
        return `http://localhost:5000/${selectedFirebaseConfig.projectId}/us-central1/${functionName}`;
      } // production
      return `https://us-central1-${selectedFirebaseConfig.projectId}.cloudfunctions.net/${functionName}`;
    },
  };

  // Initialize Cloud Firestore through Firebase
  const firestore = firebase.firestore();
  const firestoreSettings = { timestampsInSnapshots: true };
  firestore.settings(firestoreSettings);

  // Add reactReduxFirebase store enhancer when making store creator
  const createStoreWithFirebase = compose(
    reactReduxFirebase(firebase, rrfConfig),
    reduxFirestore(firebase),
  )(createStore);

  // Add firebase to reducers (uses persistReducer and hardSet)
  const rootReducer = combineReducers({
    firebase: persistReducer(
      { key: 'firepersist', storage: localStorage, stateReconciler: hardSet },
      firebaseReducer
    ),
    firestore: firestoreReducer,
    root: persistReducer(
      { key: 'app', storage: localStorage, stateReconciler: hardSet },
      Reducers
    ),
  });

  const persistedReducer = persistReducer(persistConfig, rootReducer);

firebase.initializeApp(config.firebase)
  }

  // if (window.Cypress) {
  //   firebase.functions().useFunctionsEmulator('http://localhost:5005');
  // }

  // ======================================================
  // Store Instantiation and HMR Setup
  // ======================================================
  const store = createStore(
    makeRootReducer(),
    initialState,
    compose(
      reactReduxFirebase(window.fbInstance || firebase, combinedConfig),
      reduxFirestore(window.fbInstance || firebase),
      applyMiddleware(...middleware),
      ...enhancers
    )
  )
  store.asyncReducers = {}

  // Setup hot module reloading to correctly replace reducers
  if (module.hot) {
    module.hot.accept('./reducers', () => {
      const reducers = require('./reducers').default
      store.replaceReducer(reducers(store.asyncReducers))
    })
  }

  return store
}