如何迁移到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'));

祝大家好运，??