CODEWITHSUNDEEP
reactjsfirebasegoogle-cloud-firestorereact-reduxreact-redux-firebase
Bippan Kumar
Bippan Kumar

Reputation: 718

TypeError: firestore.collection is not a function (React ,Redux, Firestore)

When integrating firebase and firestore with react I am facing this error.

I have followed new react-redux-firebase documentation but It is of no help.

Error -> TypeError: firestore.collection is not a function

This is the function where I am getting error

Code

export const addProductFamily = (productFamilyDetails) => {
  return (dispatch, getState, { getFirestore }) => {
    console.log("product family details ", productFamilyDetails);
    const firestore = getFirestore();
    console.log("firestore is ", firestore);
    firestore
      .collection("productFamilyDetails") <------------ error
      .add({
        ...productFamilyDetails,
      })
  };
};

This is the App.js file where I have set all configurations

App.js

import { Provider } from "react-redux";
import { createStore, applyMiddleware, combineReducers, compose } from "redux";
import thunk from "redux-thunk";
import authReducer from "./store/reducers/auth";
import {
  ReactReduxFirebaseProvider,
  firebaseReducer,
  getFirebase,
} from "react-redux-firebase";
import {
  createFirestoreInstance,
  firestoreReducer,
  getFirestore,
  reduxFirestore,
} from "redux-firestore";
import { firebaseConfig } from "./config/fbConfig";
import firebase from "firebase/app";

const rrfConfig = { userProfile: "users", useFirestoreForProfile: true };

const rootReducer = combineReducers({
  auth: authReducer,
  firebase: firebaseReducer,
  firestore: firestoreReducer,
});

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

const rrfProps = {
  firebase,
  config: rrfConfig,
  dispatch: store.dispatch,
  createFirestoreInstance,
};

ReactDOM.render(
  <Provider store={store}>
    <ReactReduxFirebaseProvider {...rrfProps}>
      <BrowserRouter>
        {/* <App /> */}
        <Layout />
      </BrowserRouter>
    </ReactReduxFirebaseProvider>
  </Provider>,
  document.getElementById("root")
);

I have removed unnecessary imports

Upvotes: 2

Views: 452

Answers (1)

Grant Singleton
Grant Singleton

Reputation: 1651

You called reduxFirestore with the arguments backwards. Change this:

reduxFirestore(firebaseConfig, firebase)

to this:

reduxFirestore(firebase, firebaseConfig)

Upvotes: 2

Related Questions