React-Redux 无法在 Firestore 中获取我的收藏答案

【问题标题】：React-Redux cannot fetch my collection in FirestoreReact-Redux 无法在 Firestore 中获取我的收藏
【发布时间】：2021-05-13 19:21:51
【问题描述】：

我是 Redux 和 firebase 的新手，我在 projects 集合下有 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;

【问题讨论】：

能否添加projectReducer 以查看全貌
我附上了 projectReducer 代码，但我认为它没有帮助。如果您正在寻找我如何上传 Firestore 数据，我使用 thunk 中间件调用异步任务来上传 ActionCreator 中的数据，然后将操作分派到 projectReducer.js
嗯，可能是中间件的问题，你有没有用reducer和中间件配置store，因为我们需要禁用getDefaultMiddleware serializableCheck
否；对于中间件，我只是添加了compose(applyMiddleware(thunk.withExtraArgument({getFirebase,getFirestore})), reduxFirestore(firebase, fbConfig))。禁用 getDefaultMiddleware 是什么意思？
在回答中分享一下我的店铺index.js，希望对你有帮助

标签： reactjs firebase react-redux-firebase redux-firestore

【解决方案1】：

您可以检查商店定义中的中间件。在我的情况下，商店 index.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;

【讨论】：