React-Redux无法在Firestore中获取我的集合

Question

我是Redux和firebase的新手，我在项目集合下有2个文档。但是，我无法检索这些集合。这是我的代码，

fbConfig.js:

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';
const firebaseConfig = {
... // This is correct!
};
firebase.initializeApp(firebaseConfig);
firebase.firestore();
export default firebase;

组件类(Dashboard.js):

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {firestoreConnect} from 'react-redux-firebase';
import {compose} from 'redux';
class Dashboard extends Component {
render() {
const {projects} = this.props;
...
}
}
const mapStateToProps = state => {
console.log(state);
return {projects: state.firestore.ordered.projects};
};
export default compose(
connect(mapStateToProps),
firestoreConnect(() => ['projects'])
)(Dashboard);

这是我的rootReducer.js:

import authReducer from "./authReducer";
import projectReducer from "./projectReducer";
import {combineReducers} from "redux";
import {firestoreReducer} from "redux-firestore";
const rootReducer = combineReducers({
auth: authReducer,
project: projectReducer,
firestore: firestoreReducer
});
export default rootReducer;

当我运行react项目时，它没有显示任何数据。当我打开控制台时，我看到state.firestore.ordered是一个空对象，state.firestore.data也是。我哪里做错了?

编辑1:

附加我的代码projectReducer.js:

const initState = {
projects: [
{id: 1, title: 'blah 1', content: 'blah blah 1'},
{id: 2, title: 'blah 2', content: 'blah blah 2'},
{id: 3, title: 'blah 3', content: 'blah blah 3'},
]
}
const projectReducer = (state = initState, action) => {
switch(action.type) {
case 'ADD_PROJECT':
console.log('Created project', action.project);
break;

case addProjectError:
console.log('Error on creating project', action.error);
break;
default:
break;
} 
return state;
};
export default projectReducer;

Answer 1

在存储定义中检查中间件。在我的情况下，有一个storeindex .js与Firebase Firestore:

import forbiddenValuesMiddleware from '../middleware/index'
import createSagaMiddleware from 'redux-saga'
import apiSaga from '../sagas/api-saga'
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import { reducer } from '../reducers/index'
import { DATA_LOADED } from '../constants/action-types'
import { getFirebase, actionTypes as rrfActionTypes } from 'react-redux-firebase'
import { constants as rfConstants } from 'redux-firestore'
const initialiseSagaMiddleware = createSagaMiddleware()
const extraArgument = {
getFirebase
}
const middleware = [
...getDefaultMiddleware({
serializableCheck: {
// Ignore these action types
ignoredActions: [DATA_LOADED,
// just ignore every redux-firebase and react-redux-firebase action type
...Object.keys(rfConstants.actionTypes).map(
type => `${rfConstants.actionsPrefix}/${type}`
),
...Object.keys(rrfActionTypes).map(
type => `@@reactReduxFirebase/${type}`
)
],
// Ignore these field paths in all actions
ignoredActionPaths: [],
// Ignore these paths in the state
ignoredPaths: ['remoteArticles', 'firebase', 'firestore']
},
thunk: {
extraArgument
}
}),
forbiddenValuesMiddleware,
initialiseSagaMiddleware
];
const store = configureStore({
reducer,
middleware,
});
console.log(store.getState());
initialiseSagaMiddleware.run(apiSaga)
export default store;