Accessing firebase API using redux in React

Question

I am creating a react app that should connect to Firebase and query Firestore. I am using react-redux-firebase and redux-firestore to connect to the Firebase API. I however get an error indicating that an Object... is not a function. please assist. Below is my code

I import the two like so

import { reduxFirestore, getFirestore } from 'redux-firestore';
import { reactReduxFirebase, getFirebase } from 'react-redux-firebase';

then I import my Firebase config file like so:

import fbConfig from './config/fbConfig';

My store then follows:

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

The affected line is this

applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),

It says Type error Object is not a Method.

Please assist. Thanks

gso_gabriel · Accepted Answer · 2020-06-08 06:33:32Z

1

This error is usually related to the version of the react-redux-firebase that you are importing. Please, run the below command, to check if this fixes your compatibility issues.

npm i --save react-redux-firebase@next

Besides that, as indicated in this other post here and in the official documentation here, you will need to change your code to fits in the needed setting, for it to work.

Your new code should look more like this.

import { ReactReduxFirebaseProvider } from 'react-redux-firebase'
import { createFirestoreInstance } from 'redux-firestore'

const store = createStore(
  rootReducer,
  initialState,
  compose(
  )
)

 const rrfProps = {
   firebase,
   config: rrfConfig,
   dispatch: store.dispatch,
   createFirestoreInstance // <- needed if using firestore
 }
const App = () => (
  <Provider store={store}>
   <ReactReduxFirebaseProvider {...rrfProps}>
      <Todos />
   </ReactReduxFirebaseProvider>
  </Provider>
);

This code is untested, however, it's based in successful cases and the official documentation, so I believe it should help you. I would recommend you to give it a try using it and checking the URLs I linked here, if you want a better understanding of your issue.

Let me know if the information helped you!

answered Jun 8, 2020 at 6:33

gso_gabriel

4,7102 gold badges12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David Over a year ago

this worked, thanks. was getting initialization error but I fixed that by passing firebase to reduxFirestore. Thanks

gso_gabriel Over a year ago

Hi @David nice to hear it helped you! Please, consider accepting the answer, so this way, the Community can visualize that this solution fixed the issue.

Collectives™ on Stack Overflow

Accessing firebase API using redux in React

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related