Почему react-redux-firebase не выдает список документов коллекции в firestore?

Всем привет. У меня возникла проблема при использовании библиотеки react-redux-firebase. Дело в том, что, когда я пытаюсь добавить список документов коллекции из firestore при помощи useFirestoreConnect, firestoreConnect или withFirestore, свойство state.firestore.ordered постоянно пустое, хотя в нем должны быть все, что храниться в коллекции. Это странно, потому что, при "прямом" взаимодействии с firestore через firestore.collection()... все нормально работает + не работает даже пример, который я скопировал из документации. Я совсем не понимаю, с чем это может быть связано, перепробовал уже кучу всего.

Вот код из firestore.js

import firebase from "firebase";
import 'firebase/firestore';
import {combineReducers, createStore} from 'redux';
import {firebaseReducer} from 'react-redux-firebase';
import {createFirestoreInstance, firestoreReducer} from 'redux-firestore';


firebase.initializeApp({
    apiKey: "AIzaSyD1A5N4z1vHeZOxodPiAACgPCK7JbiLP2E",
    authDomain: "book-catalog-test-task.firebaseapp.com",
    projectId: "book-catalog-test-task",
    storageBucket: "book-catalog-test-task.appspot.com",
    messagingSenderId: "736547917405",
    appId: "1:736547917405:web:670c8d45c8084b1ff547b4"
});

export const db = firebase.firestore();

const rrfConfig = {
    userProfile: 'users',
    useFirestoreForProfile: true,
}

const rootReducer = combineReducers({
    firebase: firebaseReducer,
    firestore: firestoreReducer,
});

const initialState = {};
const store = createStore(rootReducer, initialState);

export const rrfProps = {
    firebase,
    config: rrfConfig,
    dispatch: store.dispatch,
    createFirestoreInstance,
};

export default store;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {Provider} from 'react-redux';
import {ReactReduxFirebaseProvider} from 'react-redux-firebase';

import store, {rrfProps} from "./firestore/firestore";


const render = () => {
    ReactDOM.render(
        <React.StrictMode>
            <Provider store={store}>
                <ReactReduxFirebaseProvider  {...rrfProps}>
                    <App/>
                </ReactReduxFirebaseProvider>
            </Provider>
        </React.StrictMode>,
        document.getElementById('root')
    )
};

render(store.getState());

store.subscribe(() => {
    render(store.getState());
})

Контейнерная и обычная компоненты

import React, {useEffect} from 'react';
import {compose} from 'redux';
import {connect} from "react-redux";
import {firestoreConnect, withFirestore} from "react-redux-firebase";

import Books from "./Books";


const BooksContainer = ({books}) => {
    // useEffect(() => {
    //     firestore.get('books');
    // })

    return <Books books={books}/>;
};

const mapStateToProps = (state) => ({
    books: state.firebase.ordered.books,
});

export default compose(
    firestoreConnect(() => ['books']),
    // withFirestore,
    connect(mapStateToProps, {}),
)(BooksContainer);



// import React, {useEffect, useState} from 'react';

// import db from '../../firestore/firestore';
// import {useFirestoreConnect} from "react-redux-firebase";
// import {useSelector} from "react-redux";


const Books = ({books}) => {
    // const [books, setBooks] = useState([])
    //
    // useEffect(() => {
    //     db.collection("books").get().then((querySnapshot) => {
    //         const items = querySnapshot.docs.map(doc => {
    //             return {
    //                 id: doc.id,
    //                 ...doc.data(),
    //             }
    //         })
    //         setBooks(items);
    //     });
    // }, [books, setBooks])

    // const addBook = () => {
    //     db.collection('books').add({
    //         title: 'The lord of the rings',
    //         author: ['somebody'],
    //         publicDate: 1965,
    //         coverURL: '123123',
    //     });
    // };

    const displayBooks = books.map(book => {
        return <div>{book.title}</div>
    });

    return (
        <div>
            {displayBooks}
            <button>Send</button>
        </div>
    );
};

export default Books;

Ответы (1 шт):

Автор решения: ДимаЭф

В общем, я нашел, в чем дело) Оказалось, что изначально это свойство(state.firestore.ordered.[название коллекции]) являлось undefined. А т.к. далее в компоненте я мапился по массиву с данными - выскакивала ошибка "Can not read property 'map' of undefined". Следовательно, дальше выполнение программы и не шло. Как-то так. Надеюсь, смогу уберечь кого-то от такой же глупости и сэкономить время)

→ Ссылка