title: React-Redux-Firestore: Page Not Auto Reloading on Change in Firestore Data
body: <p>I am making a react/redux app that is using a firestore database for storage and I was able to link up my app to firestore so that I can create, read, update, and destroy new data to firestore from within my app. The problem is, on one of my pages when I update data it instantly updates that data in the backend firestore database but that change is not reflected on screen on the page immediately. Instead, it only shows after I do a hard refresh of the page. Also, I am currently using <a href="https://github.com/prescottprue/react-redux-firebase" rel="nofollow noreferrer">https://github.com/prescottprue/react-redux-firebase</a> and <a href="https://github.com/prescottprue/redux-firestore" rel="nofollow noreferrer">https://github.com/prescottprue/redux-firestore</a> for working with firebase in my react/redux app.</p>
  
  <p>So, what do I need to do to make my page load in new changes automatically, as I thought using react-firestore's "firestoreConnect" would work but it is not. Thanks guys and here is my code: </p>
  
  <p><strong>Data Component</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from "react";
  import { connect } from "react-redux";
  import { firestoreConnect, isLoaded } from "react-redux-firebase";
  import { compose } from "redux";
  import { Grid } from "semantic-ui-react";
  import BudgetHeader from "../BudgetHeader/BudgetHeader";
  import BudgetList from "../BudgetList/BudgetList";
  import BudgetNav from "../BudgetNav/BudgetNav";
  import { updateBudgetData, compareChooser } from "../budgetActions";
  import LoadingComponent from "../../../app/layout/LoadingComponent";
  
  const mapState = state =&gt; ({
    users: state.firestore.ordered.users
  });
  
  const actions = {
    updateBudgetData,
    compareChooser
  };
  
  class BudgetDashboard extends Component {
    updateBudgetData = (newData, fieldToUpdate) =&gt; {
      this.props.updateBudgetData(newData, fieldToUpdate);
    };
  
    onCompareChange = (event, data) =&gt; {
      if (data.checked) {
        this.props.compareChooser("net");
      } else {
        this.props.compareChooser("gross");
      }
    };
  
    render() {
      const { users } = this.props;
      if (!isLoaded(users)) return &lt;LoadingComponent inverted={true} /&gt;;
      return (
        &lt;Grid&gt;
          &lt;Grid.Column width={16}&gt;
            &lt;BudgetNav /&gt;
            &lt;BudgetHeader
              general={users[0].budget[1]}
              onCompareChange={this.onCompareChange}
            /&gt;
            &lt;BudgetList
              className="standardSeparation"
              data={users[0].budget[0]}
              unallocatedBudget={users[0].budget[1].unallocatedBudget}
              unallocatedSpending={users[0].budget[1].unallocatedSpent}
              updateData={this.updateBudgetData}
            /&gt;
          &lt;/Grid.Column&gt;
        &lt;/Grid&gt;
      );
    }
  }
  
  export default compose(
    connect(
      mapState,
      actions
    ),
    firestoreConnect([
      {
        collection: "users",
        doc: "asdfasdfF21871d",
        subcollections: [{ collection: "budget" }]
      }
    ])
  )(BudgetDashboard);</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Component Actions (where update budget method is housed)</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export const updateBudgetData = (inputData, fieldToUpdate) =&gt; {
    return async (dispatch, getState, { getFirebase, getFirestore }) =&gt; {
      try {
        const firestore = getFirestore();
  
        // Get all firestore data nodes that will be used for updating after data change
        const userBudget = firestore
          .collection("users")
          .doc("asdfasdfas8128fsa")
          .collection("budget");
        const userDataRef = userBudget.doc("data");
        const userGeneralRef = userBudget.doc("general");
  
        // variables to be used in generating updated maps
        var grossIncome = 0;
        var netIncome = 0;
        var userDataMap = {};
        var userGeneralMap = {};
  
        // get grid data
        await userDataRef
          .get()
          .then(function(doc) {
            if (doc.exists) {
              userDataMap = doc.data();
            } else {
              console.log("No user data");
            }
          })
          .catch(function(error) {
            console.log("User Data Document Get Error: ", error);
          });
        // get header data
        await userGeneralRef
          .get()
          .then(function(doc) {
            if (doc.exists) {
              const data = doc.data();
              userGeneralMap = data;
              grossIncome = data.grossIncome;
              netIncome = data.netIncome;
            } else {
              console.log("No general data");
            }
          })
          .catch(function(error) {
            console.log("User General Document Get Error: ", error);
          });
  
        // generate new data and general document mappings
        const updatedMaps = generateUpdatedMaps(
          userDataMap,
          userGeneralMap,
          grossIncome,
          netIncome,
          inputData,
          fieldToUpdate
        );
        const newUserDataMap = updatedMaps.newDataMap;
        const newUserGeneralMap = updatedMaps.newGeneralMap;
  
        // update firestore data with new mappings
        userDataRef.set(newUserDataMap);
        userGeneralRef.set(newUserGeneralMap);
  
        toastr.success("Success!", "Budget data has been updated");
      } catch (error) {
        toastr.error("Oops", "Something went wrong");
      }
    };
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>I thought by wrapping my BudgetDashboard component in firestoreConnect the listener would automatically update when changes occur but that is not happening. Instead only on a hard refresh does my LoadingComponent show and the new data finally is reflected on screen. So how do I make any change immediately reflect a change on screen?  </p>