react-redux-firebase和redux-firestore集成

Question

每次都会出现一个新的不同的错误:例如："TypeError: Object(...)“或者“Cannot call reactReduxFirebase() - TypeError: Object is not a function”我是firebase的新手。我正在尝试把firebase和react，redux，redux-thunk集成起来。firebase最近发布了新版本的v9，在配置上有一些变化，让我迷失了方向。我的数据库中已经有了一个名为'projects‘的集合和一些虚拟数据。

config.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;

Index.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 })
            })
    }
}

Answer 1

上一个答案

看起来你需要用v9添加“/compat”

从‘firebase /compat/app’导入firebase；

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

更新的答案

多亏了Codesandbox，我可以看到你有这些问题

1. fbconfig.js -添加了compat，您的firestore已被覆盖，已使用compat修复

2.index.js

• React-Redux-Firebase更改为提供者模式，您使用v3.1x更新了package.json。但是您的代码是2.x样式的，请参阅此处的迁移指南>通过添加配置object
• Modified imports

1. Package.json更改了https://react-redux-firebase.com/docs/v3-migration-guide.html
2. https://github.com/prescottprue/redux-firestore -此时，只需运行一个diff :)

CodeSandbox

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

​

​