Fetching data with redux from firebase

Question

I am trying to fetch from Firebase some data using redux and display them with react within a material table component. The data are received but after the data arrived I receive this error: TypeError: Cannot read property 'length' of undefined. I think that the payload is sent before that all the data to be received from firebase. Still, I am using await on this and I don't understand where I am getting wrong.

export const fetchReviews = () => async (dispatch) => {

const reviewsCollectionRef = db.collection('reviews');
let reviews = [];
 await reviewsCollectionRef .get().then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
    // doc.data() is never undefined for query doc snapshots
    // console.log(doc.id, " => ", doc.data());
    reviews.push(doc.data());
  
}); }).then(() =>   dispatch({
type: FETCH_DATA_FROM_FIREBASE,
payload: reviews
}));

I tired the code of @Praveen Dass 's answer and it works as expected for me. Maybe the issue is that your component is accessing the data when it still hasn't been fetched. Could you share the code that calls the fetchReviews() method? — Jose V
– Jose V, Commented Jul 21, 2020 at 13:12

Praveen Dass · Accepted Answer · 2020-07-15 12:38:18Z

1

Try the below code:

export const fetchReviews = () => async (dispatch) => {
  let reviews = [];
  //perform asynchronous tasks
  await db.collection('reviews').get()
  .then((querySnapshot) => {
    querySnapshot.forEach(function(doc) {
      reviews.push(doc.data());
    })       
  });
  dispatch({
    type: FETCH_DATA_FROM_FIREBASE,
    payload: reviews
  });
}

edited Jul 15, 2020 at 12:38

answered Jul 15, 2020 at 11:20

Praveen Dass

6261 gold badge4 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3787954 Over a year ago

I receive the error before the actual rendering within the component. The error is triggered when the logger is trying to log the payload.

user3787954 Over a year ago

Same result unfortunetly.

user3787954 Over a year ago

The issue was caused by a mistake made by me while I was trying to connect the component to the redux store. Thank you for your answer.

Collectives™ on Stack Overflow

Fetching data with redux from firebase

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related