Почему 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". Следовательно, дальше выполнение программы и не шло. Как-то так. Надеюсь, смогу уберечь кого-то от такой же глупости и сэкономить время)