Cannot call reactReduxFirebase() - TypeError: Object is not a function

Question

I an using redux-thunk as a middleware and trying to connect to redux-firestore. When I run the application I am getting the error "TypeError: Object(...) is not a function" at createStore.

import reportWebVitals from './reportWebVitals';
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({getFirestore,getFirebase})),
    reduxFirestore(FBConfig),
    reactReduxFirebase(FBConfig)
  )
);

I am using the extra arguments in my thunk actions like this:

export const createProject=(project)=>{
      return(dispatch,getState,{getFirebase,getFirestore})=>{
            //asyn call to database
            const firestore=getFirestore();
            firestore.collection('projects').add({
                  ...project,
                  authorFirstName:'Nam',
                  authorLastName:'Pam',
                  authorId:123,
                  createAt: new Date()
            }).then(()=>{
                  dispatch({type:'CREATE_PROJECT',project});
                  
            }).catch((err)=>{
                  dispatch({type:'CREATE_PROJECT_ERROR',err})
            })  
      }
};

Answer 1

The error that you are seeing is likely due to upgrading react-redux-firebase from v2 to v3 (or basing new code on outdated examples). This update introduced some breaking changes such as the removal of the reactReduxFirebase store enhancer function. The package now uses React contexts and introduced some new hooks such as useFirebase and useFirestore which allow you to access firebase through the context in function components. But that doesn't help with your thunk.

In the page on Redux Thunk Integration, they recommend passing the getFirebase function to the withExtraArgument.

thunk.withExtraArgument(getFirebase)

As far as accessing firestore, this GitHub discussion recommends accessing it through the getFirebase function.

getFirebase().firestore()

You want your extra argument to be an object with properties getFirebase and getFirestore. We use getFirebase as one property and create an inline arrow function for the getFirestore property.

import {createStore,applyMiddleware, AnyAction} from 'redux';
import thunk from 'redux-thunk';
import {getFirebase} from 'react-redux-firebase';

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