0

我是 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;

当我运行反应项目时，它没有显示任何数据。当我打开控制台时，我看到这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;
4

1 回答 1

0

您可以在商店定义中检查中间件。在我的情况下，商店 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;
于 2021-02-10T15:12:32.110 回答