CODEWITHSUNDEEP
reactjsfirebasereduxgoogle-cloud-firestorereact-redux-firebase
David
David

Reputation: 528

Accessing firebase API using redux in React

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

Upvotes: 0

Views: 126

Answers (1)

gso_gabriel
gso_gabriel

Reputation: 4670

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!

Upvotes: 1

Related Questions