从 firebase v9 检索到的数据未定义

Question

When retrieving data and console.log it, the data shows perfectly, but when trying to dispatch the action with the argument as a data it turns out to be undefined .

I tried to use await before dispatch the action, but it didn't change anything. Why does it happen?

actions.js

import * as types from './actionTypes'
import { db } from '../firebase';
import { collection, getDocs } from "firebase/firestore";

const getFeedbacksStart = () => ({
    type: types.GET_FEEDBACKS_START,
});

const getFeedbacksSussess = (feedbacks) => ({
    type: types.GET_FEEDBACKS_SUCCESS,
    payload: feedbacks
});

const getFeedbacksFail = () => ({
    type: types.GET_FEEDBACKS_FAIL,
});


export const getFeedbacks = () => {
    return async function (dispatch) {
        dispatch(getFeedbacksStart());

        try {
            const querySnapshot = await getDocs(collection(db, "feedbacks"));
            querySnapshot.forEach((doc) => {
                console.log(doc.id, " => ", doc.data())
            });

            const feedbacks = querySnapshot.forEach((doc) => doc.data());

            dispatch(getFeedbacksSussess(feedbacks))


        } catch (error) {
            dispatch(getFeedbacksFail(error))
        }
    }
}

actionTypes.js

export const GET_FEEDBACKS_START = 'GET_FEEDBACKS_START';
export const GET_FEEDBACKS_SUCCESS = 'GET_FEEDBACKS_SUCCESS';
export const GET_FEEDBACKS_FAIL = 'GET_FEEDBACKS_FAIL';

reducer.js

import * as types from './actionTypes'

const initialState = {
    feedbacks: {},
    loading: false,
    error: null,
};

const feedbackReducer = (state = initialState, action) => {
    switch (action.type) {
        case types.GET_FEEDBACKS_START:
            return {
                ...state,
                loading: true
            }
        case types.GET_FEEDBACKS_SUCCESS:
            return {
                ...state,
                loading: false,
                feedbacks: action.payload,
            }
        case types.GET_FEEDBACKS_FAIL:
            return {
                ...state,
                loading: false,
                error: action.payload,
            }
        default:
            return state;
    }

}

export default feedbackReducer;

root-reducer.js

import { combineReducers } from "redux";

import feedbackReducer from "./reducer";

const rootReducer = combineReducers({
    data: feedbackReducer, 
});

export default rootReducer;

store.js

import { configureStore } from '@reduxjs/toolkit';
import thunk from 'redux-thunk';
import logger from 'redux-logger';

import rootReducer from './root-reducer';
  
const store = configureStore({
    reducer: rootReducer,
    middleware: [thunk, logger],
});

export default store;

ListRecord.js where I dispatch the action

import React, { useEffect, useState, useContext } from "react";
import { useSelector, useDispatch } from 'react-redux';
import { getFeedbacks } from "../redux/actions";


const ListRecord = () => {
    const [data, setData] = useState({});
    console.log("data", data);

    const state = useSelector(state => state.data);
    console.log("state =>", state);

    let dispatch = useDispatch();

    useEffect(() => {
        dispatch(getFeedbacks());
    }, [])



    return (
        <>

        </>
    );
};

export default ListRecord;

Answer 1

I figured out what I was doing wrong. I tried to retrieve the data in the wrong way. I was trying to use forEach method on a collection. Firstly, it needed to refer to the docs inside a db -> querySnapshot.docs and then you can use .map() method and loop through the whole collection you have inside your database.

The example of how to do it right with firebase v9 is HERE

Here is a working code:)

In actions.js

export const getFeedbacks = () => {
    return function (dispatch) {
        dispatch(getFeedbacksStart())

        const getData = async () => {
            try {
                const querySnapshot = await getDocs(collection(db, "feedbacks"));
                const feedbacks = querySnapshot.docs.map((doc) => ({
                    ...doc.data(),
                    id: doc.id
                }))
                dispatch(getFeedbacksSussess(feedbacks));

            } catch (error) {
                dispatch(getFeedbacksFail(error))
            }

        }
        getData();
    }
}