Data is not passing to component in React Redux - reactjs

Question

I am working in a React Redux project.
My Reducer is like below
statusReducer.js
import { FETCH_STATUS } from "../firebase/types";
export default (state = false, action) => {
switch (action.type) {
case FETCH_STATUS:
return action.payload || null;
default:
return state;
}
};
My dispatcher is like below
Status.js
import firebase from 'firebase/app';
import { todosRef, authRef, provider } from './firebase';
import { FETCH_STATUS, FETCH_ONESTATUS } from './types.js';
const databaseRef = firebase.firestore();
export const fetchStatus = uid => async dispatch => {
var data = [];
databaseRef.collection('status').doc(uid).collection('status').get().then((snapshot) => {
snapshot.forEach((doc) => {
var snap = doc.data();
snap.key = doc.id;
data.push(snap);
console.log(data); // I am getting values here
});
dispatch({
type: FETCH_STATUS,
payload: data,
});
});
};
My Component is like below
import React from "react";
import * as actions from './firebase/Status';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom'
class Status extends React.Component {
componentWillMount() {
const { auth } = this.props;
this.props.fetchStatus(auth.uid);
};
renderStatus() {
const { status } = this.props;
const data = status ? Object.values(status) : [];
console.log(status) // I am not getting values here
}
render() {
return (
//more HTML code
);
}
}
const mapStateToProps = ({ auth, status }) => {
return {
auth,
status,
}
}
export default connect(
mapStateToProps,
actions
)(Status);

Answer 1

There is some problem with your Status.js file. You're fetching data from firebase and try to dispatch it. But the problem is your program dispatch before getting data form firebase.
So you can use JS Promise for that. Maybe this will help!!!
...
const request = snapshot.forEach((doc) => {
return new Promise((resolve) => {
var snap = doc.data();
snap.key = doc.id;
console.log(data); // I am getting values here
});
});
Promise.all(request).then(() => {
dispatch({
type: FETCH_STATUS,
payload: data,
});
});
...