3

每次出现新的不同错误时:例如:“TypeError:Object(...)”或“Cannot call reactReduxFirebase() - TypeError: Object is not a function” 我是 firebase 新手。我正在尝试将 firebase 与 react、redux、redux-thunk 集成。firebase 最近推出了新版本 v9,我迷路的配置发生了一些变化。目的只是云我已经在我的数据库中有一个名为“项目”的集合和一些虚拟数据。

配置.js


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

const fbConfig = {
// my app details ///
};
firebase.initializeApp(fbConfig);
firebase.firestore().settings({ timestampsInSnapshots: true });
export default firebase;

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css'
import {createStore, compose, applyMiddleware} from 'redux';
import {Provider} from 'react-redux';
import rootReducer from './store/reducers/rootReducer';
import thunk from 'redux-thunk';
import { reduxFirestore, getFirestore } from 'redux-firestore';
import { reactReduxFirebase, getFirebase } from 'react-redux-firebase';
import fbConfig from './config/fbConfig'

const store = createStore(rootReducer,
  compose(
    applyMiddleware(thunk.withExtraArgument({getFirebase, getFirestore})),
    reactReduxFirebase(fbConfig), // redux binding for firebase
    reduxFirestore(fbConfig) // redux bindings for firestore
  )
);

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

projectAction.js

export const createProject = (project)=>{
    return (dispatch, getState,{getFirebase, getFirestore})=>{
        const firestore = getFirestore();
        firestore.collection('projects').add({
            ...project, 
            authorFirstName:'mrxman',
            authorLastName:'simon',
            authorId:123456,
            createdAt:new Date()
        }).then(() => {
            dispatch({
                type: 'CREATE_PROJECT',
                project
            })
        }).catch((err) =>  {
                dispatch({  type: 'CREATE_PROJECT_ERROR', err })
            })
    }
}
4

1 回答 1

1

上一个答案

看起来您需要在 v9 中添加“/compat”

从“firebase/compat/app”导入 firebase;

原始详细答案: https ://stackoverflow.com/a/68967024/13749957

更新的答案

感谢 Codesandbox,我可以看到您遇到了这些问题

  1. fbconfig.js - 添加了兼容,您的 Firestore 被覆盖,修复了merge:true

2. index.js

  1. Package.json - 此时,只需运行 diff :)

代码沙盒

https://codesandbox.io/s/blissful-lehmann-r610w?file=/src/config/fbConfig.js

在此处输入图像描述

于 2021-09-03T13:16:37.827 回答