React-Redux-Firestore: страница не автоматически перезагружается при изменении данных Firestore - PullRequest
Новая
       24

React-Redux-Firestore: страница не автоматически перезагружается при изменении данных Firestore

0 голосов
/ 23 ноября 2018

Я создаю приложение реагирования / редукции, которое использует базу данных firestore для хранения, и я смог связать свое приложение с firestore, чтобы я мог создавать, считывать, обновлять и уничтожать новые данные для firestore из моего приложения,Проблема в том, что на одной из моих страниц, когда я обновляю данные, она мгновенно обновляет эти данные в базе данных бэкэнд-магазина, но это изменение не сразу отражается на экране на странице.Вместо этого он отображается только после того, как я тщательно обновил страницу.Кроме того, в настоящее время я использую https://github.com/prescottprue/react-redux-firebase и https://github.com/prescottprue/redux-firestore для работы с firebase в моем приложении «Реакция / Редукс».

Итак, что мне нужно сделать, чтобы моя страница загрузилась вновые изменения выполняются автоматически, как я и думал, используя «firestoreConnect» команды Restore-firestore будет работать, но это не так.Спасибо, ребята, и вот мой код:

Компонент данных 

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 => ({
  users: state.firestore.ordered.users
});

const actions = {
  updateBudgetData,
  compareChooser
};

class BudgetDashboard extends Component {
  updateBudgetData = (newData, fieldToUpdate) => {
    this.props.updateBudgetData(newData, fieldToUpdate);
  };

  onCompareChange = (event, data) => {
    if (data.checked) {
      this.props.compareChooser("net");
    } else {
      this.props.compareChooser("gross");
    }
  };

  render() {
    const { users } = this.props;
    if (!isLoaded(users)) return <LoadingComponent inverted={true} />;
    return (
      <Grid>
        <Grid.Column width={16}>
          <BudgetNav />
          <BudgetHeader
            general={users[0].budget[1]}
            onCompareChange={this.onCompareChange}
          />
          <BudgetList
            className="standardSeparation"
            data={users[0].budget[0]}
            unallocatedBudget={users[0].budget[1].unallocatedBudget}
            unallocatedSpending={users[0].budget[1].unallocatedSpent}
            updateData={this.updateBudgetData}
          />
        </Grid.Column>
      </Grid>
    );
  }
}

export default compose(
  connect(
    mapState,
    actions
  ),
  firestoreConnect([
    {
      collection: "users",
      doc: "asdfasdfF21871d",
      subcollections: [{ collection: "budget" }]
    }
  ])
)(BudgetDashboard);

Компонент Действия (где используется метод обновления бюджета) 

export const updateBudgetData = (inputData, fieldToUpdate) => {
  return async (dispatch, getState, { getFirebase, getFirestore }) => {
    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");
    }
  };
};

Я подумал, обернув компонент BudgetDashboard в firestoreConnect, слушатель будет автоматически обновляться, когда изменения происходят, но этого не происходит.Вместо этого только при жестком обновлении мой LoadingComponent показывает, и новые данные, наконец, отображаются на экране.Итак, как я могу сделать любое изменение, которое сразу же отражает изменения на экране?

1 Ответ

0 голосов
/ 23 ноября 2018

Итак, представьте, что экран, который вам нужно обновить, это «screen1».Это будет выглядеть так: 

import { NavigationActions, StackActions } from 'react-navigation';

default class Screen1 extends Component {
  constructor(props) {
    super(props);
  }

  <<stuff from your component>>   
}

const mapDispatchToProps = (dispatch, ownProps) => {
  goToHomeScreen: () => { 
    ownProps.navigation.dispatch(StackActions.reset({index: 0, key: null, actions: [NavigationActions.navigate({ routeName: '**<<ROUTE YOU WANT TO GO>>**'})]}))
  },
}

export default connect(mapDispatchToProps)(Screen1);

Так, например, после того, как вы получили данные из магазина, а затем вам нужно обновить экран, вы бы назвали его следующим образом: 

this.props.goToHomeScreen()

Надеюсь, это поможет, не уверен, что это то, что вам нужно, но я нашел способ обновить экран после получения нового реквизита из магазина.

...