Я пытаюсь отобразить список документов, которые я сохранил в пожарном депо в ответ на избыточность. Однако, несмотря на настройку моего хранилища и моих действий, кажется, что реакция не может найти объект firestore
, что приводит к ошибкам, таким как cannot call map() of undefined
.
Я полагаю, что все настроено правильно в соответствии с последней документацией react-redux : v6
и react-redux-firebase : v3
но они просто не хотят хорошо играть вместе! Я пролил свой код, но не могу найти проблему:
App.tsx
import React from 'react';
import Navbar from './components/layout/Navbar';
//import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Dashboard from './components/dashboard/Dashboard';
import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from './store/reducers/rootReducer';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import {
createFirestoreInstance,
getFirestore,
reduxFirestore,
} from 'redux-firestore';
import { ReactReduxFirebaseProvider, getFirebase } from 'react-redux-firebase';
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';
const firebaseConfig = {
};
firebase.initializeApp(firebaseConfig);
firebase.firestore();
const store = createStore(
rootReducer,
compose(
applyMiddleware(
thunk.withExtraArgument({
getFirebase,
getFirestore,
})
),
reduxFirestore(firebase)
)
);
const rrfConfig = {
useFirestoreForProfile: true, // Firestore for Profile instead of Realtime DB
};
const rrfProps = {
firebase,
config: rrfConfig,
dispatch: store.dispatch,
createFirestoreInstance, // <- needed if using firestore
};
function App() {
return (
<Provider store={store}>
<ReactReduxFirebaseProvider {...rrfProps}>
<div className="App">
<Navbar></Navbar>
<Dashboard></Dashboard>
</div>
</ReactReduxFirebaseProvider>
</Provider>
);
}
export default App;
Root редуктор
import authReducer from './authReducer';
import postReducer from './postReducer';
import { combineReducers } from 'redux';
import { firestoreReducer, firebaseReducer } from 'react-redux-firebase';
const rootReducer = combineReducers({
auth: authReducer,
postData: postReducer,
firebase: firebaseReducer,
firestore: firestoreReducer,
});
export default rootReducer;
Действия
Несмотря на то, что у меня есть определенное действие для создания публикации (это работает), я не могу получить доступ к свойству ordered
объекта firestore
, как я могу получить доступ к коллекциям документов?
export const createProject = (post: { [key: string]: any }) => {
return (dispatch: Function, getState: any, { _, getFirestore }: any) => {
//anyc code start
const firestore = getFirestore();
firestore
.collection('posts')
.add({
...post,
createdAt: new Date(),
})
.then(() => {
dispatch({
type: 'CREATE_POST',
post: post,
});
})
.catch((err: Error) => {
//dispatch({ type: 'CREATE_POST_ERROR', error: err });
console.log(err);
});
//async code end
};
};
PostTable
Здесь я пытаюсь отобразить сообщения:
import React from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { firestoreConnect } from 'react-redux-firebase';
const PostTable = (props: { [key: string]: any }) => {
console.log(props);
return (
<table className="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
{props.posts.map((post: { [key: string]: any }) => {
return (
<tr key={post.id}>
<th scope="row">{post.id}</th>
<td>{post.title}</td>
<td>{post.content}</td>
</tr>
);
})}
</tbody>
</table>
);
};
const mapStateToProps = (state: { [key: string]: any }) => {
console.log(state);
return {
posts: state.firestore.ordered.posts,
};
};
export const PostTableCompose = compose(
connect(mapStateToProps),
firestoreConnect([
{
collection: 'posts',
},
])
)(PostTable) as React.ComponentType;