How to migrate to v3 of react-redux-firebase

Question

I trying to migrate my project from react-redux-firebase v2 to v3 with the new ReactReduxFirebaseProvider & createFirestoreInstance

My code works as is now. But after the upgrade to react-redux-firebase v3, it's not. Im getting this error:

undefined

This is my 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();

I have tried to implement it from their own migrate guide that they have here: http://react-redux-firebase.com/docs/v3-migration-guide.html#what-changed But I not getting it... maybe I still got a lot to learn. But would be nice if someone could point me in the right direction.

I have tried to changed the code but not with any good result:

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();

score 2 · Accepted Answer · answered Mar 06 '19 at 15:27

looks like you actually didnt updated react-redux-firebase to v3.

can you check version of react-redux-firebase in package.json? if it is still v2 then you can update it to v3 with npm install react-redux-firebase@next

v3 is next major release and not yet installable with npm install react-redux-firebase@latest at this time.

score 0 · Answer 2 · answered Aug 21 '20 at 18:10

You have to import firebase. see below your code updated.

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();

score 0 · Answer 3 · answered Nov 30 '20 at 02:02

I am junior React developer, I am using React, Redux and Firebase v3.8.2 in my project. I got the same problem of connecting my app with firebase using these that you sahred.

SO I ALREADY find the solution:

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'));

Good Luck everyone

How to migrate to v3 of react-redux-firebase

3 Answers3