如何迁移到 react-redux-firebase v3

Posted 2023-02-22

【中文标题】如何迁移到 react-redux-firebase v3

【英文标题】：How to migrate to v3 of react-redux-firebase

【发布时间】：2019-06-06 08:25:23

【问题描述】：

我尝试使用新的 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();

【参考方案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 安装。

【参考方案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();

【参考方案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'));

祝大家好运??