Question

我试图将简单的react / redux应用程序连接到Firebase。我一直在遵循一个教程，据我所知，我的代码与该示例完全相同。版本存在一些差异，但是即使我更改了版本以匹配它，也以相同的方式失败。

简而言之，我不知道我在做什么错以及为什么它无法连接。似乎该商店未正确添加reducer，但是我不确定所有这些库都是新手。

有人可以告诉我我在做什么错吗？我知道firebase的东西已经设置好并且可以正常工作，但是这部分让我很沮丧。

注意：所有内容都会编译，错误消息会在firestoreConnect部分中发生

我要导入的配置文件：

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

// Initialize Firebase
var config = {
  // REDACTED BUT VALID
};
firebase.initializeApp(config);
firebase.firestore().settings({ timestampsInSnapshots: true });

export default firebase;

减根剂定义：

import { combineReducers } from 'redux';
import { firestoreReducer } from 'redux-firestore';
import { firebaseReducer } from 'react-redux-firebase';

import authReducer from './authReducer';
import projectReducer from './projectReducer';

const rootReducer = combineReducers({
  auth: authReducer,
  project: projectReducer,
  firestore: firestoreReducer,
  firebase: firebaseReducer
});

export default rootReducer;

Index.js

import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createStore, applyMiddleware, compose } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { reduxFirestore, getFirestore } from 'redux-firestore';
import { reactReduxFirebase, getFirebase } from 'react-redux-firebase';
import fbConfig from './config/fbConfig';

import rootReducer from './store/reducers/rootReducer';


const store = createStore(rootReducer,
  compose(
    applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
    reactReduxFirebase(fbConfig), // fbConfig is the config file name imported above
    reduxFirestore(fbConfig),
  )
);

ReactDOM.render(
  <Provider store={ store }>
    <App />
  </Provider>, document.getElementById('root')
);

组件中的用途

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { firestoreConnect } from 'react-redux-firebase';
import { compose } from 'redux';

// component class definition called Dashboard...

const mapStateToProps = (state) => {
    console.log(state);
    return {
        projects: state.firestore.ordered.projects
    }
}

export default compose(
    connect((mapStateToProps)),
    firestoreConnect([
        { collection: 'projects' }
    ]),
)(Dashboard);

错误的屏幕截图： FirestoreConnectError

firestoreConnect：无法读取未定义的属性“ firestore”

0 个答案: