getting data async from Firebase - reactjs

Question

I am trying to fetch some data from a firebase collection, however I cannot seem to get it to work properly.
My code is as follows:-
component:-
import React, { Component } from 'react'
import { connect } from 'react-redux';
import { fetchPlayers } from '../../redux/players/players.actions';
class Players extends Component {
componentDidMount() {
this.props.fetchPlayers();
}
render() {
const { players } = this.props;
// const playerItems = players.map(player => (
// <div key={player.id}>
// <h3>{player.name}</h3>
// </div>
// ));
return (
<div>
<h1>PLAYERS</h1>
{/* {playerItems} */}
</div>
)
}
}
const mapStateToProps = state => ({
players: state.players.items,
newPlayer: state.players.item
});
export default connect(mapStateToProps, {fetchPlayers})(Players);
My actions file looks like this :-
import { FETCH_PLAYERS, NEW_PLAYER } from "./players.types";
import { getPlayers, addPlayer } from '../../db/firebase/players.firebase';
// this syntax below will return the dispatch (to the reducer)
export const fetchPlayers = () => dispatch => {
const players = getPlayers();
dispatch({
type: FETCH_PLAYERS,
payload: players
});
};
export const createPlayer = playerToAdd => dispatch => {
addPlayer(playerToAdd);
dispatch({
type: NEW_PLAYER,
payload: playerToAdd
});
};
And my db function is as follows :-
import firebase from "../../config/firebase";
const db = firebase.firestore();
export const getPlayers = () => {
const players = fetchData();
return players;
}
export const addPlayer = (playerToAdd) => {
db.collection("players").add({ ...playerToAdd });
}
const fetchData = async () => {
let playerArr = [];
await db.collection("players")
.get()
.then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
playerArr = playerArr.concat(doc.data());
});
})
.catch(function(error) {
console.log("Error getting documents: ", error);
});
return playerArr;
}
My problem is that in my component, the players remains as a promise, and the fetchData() db call is being returned after.
How can I await the array to be populate first (in the fetchData()) and then pass this to my component through the actions?
Thanks for your help, very much appreciated!

Answer 1

I have managed to fix it in this way, not sure if this is the correct way though, still fairly new to Redux:-
component:-
import React, { Component } from 'react'
import { connect } from 'react-redux';
import { fetchPlayers } from '../../redux/players/players.actions';
class Players extends Component {
componentDidMount() {
this.props.fetchPlayers();
}
render() {
const {players} = this.props;
let playerItems = ''
if (players) {
playerItems = players.map(player => (
<div key={player.id}>
<h3>{player.name}</h3>
</div>
));
}
return (
<div>
<h1>PLAYERS</h1>
{playerItems}
</div>
)
}
}
const mapStateToProps = state => ({
players: state.players.items,
newPlayer: state.players.item
});
export default connect(mapStateToProps, {fetchPlayers})(Players);
actions:-
import { FETCH_PLAYERS, NEW_PLAYER } from "./players.types";
import { getPlayers, addPlayer } from '../../db/firebase/players.firebase';
// this syntax below will return the dispatch (to the reducer)
export const fetchPlayers = () => async dispatch => {
const players = await getPlayers();
dispatch({
type: FETCH_PLAYERS,
payload: players
});
};
export const createPlayer = playerToAdd => dispatch => {
addPlayer(playerToAdd);
dispatch({
type: NEW_PLAYER,
payload: playerToAdd
});
};
firebase:-
import firebase from "../../config/firebase";
const db = firebase.firestore();
export const getPlayers = async () => {
const players = await fetchData();
return players;
}
export const addPlayer = (playerToAdd) => {
db.collection("players").add({ ...playerToAdd });
}
const fetchData = async () => {
let playerArr = [];
await db.collection("players")
.get()
.then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
playerArr = playerArr.concat(doc.data());
});
})
.catch(function(error) {
console.log("Error getting documents: ", error);
});
return playerArr;
}
In this way its working however if you have any suggestions, more than welcome to listen to.
Thanks