получение данных asyn c из Firebase - PullRequest
Новая
       2

получение данных asyn c из Firebase

1 голос
/ 17 февраля 2020

Я пытаюсь получить некоторые данные из коллекции Firebase, однако я не могу заставить их работать должным образом.

Мой код выглядит следующим образом: -

компонент: - 

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);

Мой файл действий выглядит так: - 

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
  });
};

И моя функция БД выглядит следующим образом: - 

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;

}

Моя проблема в том, что в моем компоненте, игроки остаются в качестве обещания, и после этого возвращается вызов базы данных fetchData ().

Как мне дождаться массива, который будет заполнен первым (в fetchData ()), а затем передать его моему компоненту через действия?

Спасибо за помощь, очень признателен!

1 Ответ

0 голосов
/ 17 февраля 2020

Мне удалось исправить это таким образом, но я не уверен, что это правильный путь, но все еще довольно нов в Redux: -

компонент: - 

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
});

экспорт по умолчанию 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;

}

Таким образом, он работает, однако если вы есть какие-либо предложения, более чем добро пожаловать для прослушивания.

Спасибо

...