如何迁移到 react-redux-firebase v3

Question

我尝试使用新的 ReactReduxFirebaseProvider 和 createFirestoreInstance 将我的项目从 react-redux-firebase v2 迁移到 v3

我的代码现在可以正常工作。但是升级到 react-redux-firebase v3 之后，就不是了。我收到此错误：

这是我的 index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore, applyMiddleware, compose } from 'redux'
import rootReducer from './store/reducers/rootReducer'
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'

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

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

我试图从他们自己的迁移指南中实现它：http://react-redux-firebase.com/docs/v3-migration-guide.html#what-changed 但我没有得到它......也许我还有很多东西要学。但是，如果有人能指出我正确的方向，那就太好了。

我尝试更改代码但没有任何好的结果：

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


const store = createStore(rootReducer,
  compose(
    applyMiddleware(thunk.withExtraArgument({getFirebase, getFirestore})),
  )
);

const rrfProps = {
  firebase,
  config: fbConfig,
  dispatch: store.dispatch,
  createFirestoreInstance
}

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

Answer 1

看起来你实际上没有将 react-redux-firebase 更新到 v3。

你能检查 package.json 中 react-redux-firebase 的版本吗？如果它仍然是 v2，那么您可以使用 npm install react-redux-firebase@next 将其更新到 v3

v3 是下一个主要版本，目前还不能使用npm install react-redux-firebase@latest 安装。

Answer 2

您必须导入 firebase。请参阅下面的代码更新。

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

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

var fbConfig = {};

firebase.initializeApp(fbConfig);
firebase.analytics();
firebase.firestore();


const store = createStore(rootReducer,
  compose(
    applyMiddleware(thunk.withExtraArgument({getFirebase, getFirestore})),
  )
);

const rrfProps = {
  firebase,
  config: fbConfig,
  dispatch: store.dispatch,
  createFirestoreInstance
}

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

Answer 3

我是初级 React 开发人员，我在我的项目中使用 React、Redux 和 Firebase v3.8.2。我遇到了同样的问题，即使用您分享的这些将我的应用程序与 firebase 连接起来。

所以我已经找到解决方案了：

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

 const store= createStore(rootReducer,
   compose(
      applyMiddleware(thunk.withExtraArgument({getFirebase, getFirestore})),
      reduxFirestore(fbConfig)
    )
 );

 const rrfProps = {
           firebase,
           config: fbConfig,
           dispatch: store.dispatch,
           createFirestoreInstance 
  }

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

祝大家好运??