2

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

1 Answer 1

2

You called reduxFirestore with the arguments backwards. Change this:

reduxFirestore(firebaseConfig, firebase)

to this:

reduxFirestore(firebase, firebaseConfig)
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.