react-redux-firebase firestore returns function and not object

Question

I'm trying to use firestore with react-redux-firebase on a React App, and when I try to access state.firestore it returns a function and no the object. I'll attach the code for initialization.

This is the app file.

import React from "react";
import ReactDOM from "react-dom";
import "./index.styles.ts";
import * as serviceWorker from "./serviceWorker";
import Theme from "./components/Theme";
import configureStore from "./store/configureStore";
import { Provider } from "react-redux";
import Routes from "routes";

import firebase from 'firebase/app'
import 'firebase/auth';
import 'firebase/firestore';
// import 'firebase/functions' // <- needed if using httpsCallable
import {
  ReactReduxFirebaseProvider,
} from 'react-redux-firebase'
import { createFirestoreInstance } from 'redux-firestore';

const firebaseConfig = {
};


// react-redux-firebase config
const rrfConfig = {
  userProfile: 'users',
  useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB
  // enableClaims: true // Get custom claims along with the profile
}

// Initialize firebase instance

firebase.initializeApp(firebaseConfig);
firebase.firestore();

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

ReactDOM.render(
  <Theme>
    <Provider store={store}>
      <ReactReduxFirebaseProvider {...rrfProps}>
        <Routes />
      </ReactReduxFirebaseProvider>
    </Provider>
  </Theme>,
  document.getElementById("root")
);

serviceWorker.unregister();

According to the docs, this is basically what's needed to be able to access firestore.

This is the configureStore file

import { createBrowserHistory } from "history";
import { createStore, applyMiddleware, Store } from "redux";
import { routerMiddleware } from "connected-react-router";
import thunk from "redux-thunk";

import { History } from "history";
import { combineReducers, compose } from "redux";
import { connectRouter } from "connected-react-router";
import * as reducers from "./reducers";
import { firebaseReducer } from "react-redux-firebase";
import { reduxFirestore } from "redux-firestore";

export const history = createBrowserHistory();

const createRootReducer = (history: History<any>) =>
  combineReducers({
    router: connectRouter(history),
    firebase: firebaseReducer,
    firestore: reduxFirestore,
    ...reducers,
  });

export default function configureStore(): Store {
  const store = createStore(
    createRootReducer(history), // root reducer with router state
    compose(
      applyMiddleware(
        routerMiddleware(history), // for dispatching history actions
        thunk
      )
    )
  );
  return store;
}

Answer 1

Update: As confirmed by @luis, the fix was actually importing firestoreReducer instead of reduxFirestore in the configureStore.ts.

You are setting fiterstore as reduxFirestore, which is imported from redux-firestore library which is indeed a function.

I am not sure if you are using it correctly. Following is usage code from library's npm page:

import { createStore, combineReducers, compose } from 'redux';
import { reduxFirestore, firestoreReducer } from 'redux-firestore';
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';
import 'firebase/firestore';
 
const firebaseConfig = {}; // from Firebase Console
const rfConfig = {}; // optional redux-firestore Config Options
 
// Initialize firebase instance
firebase.initializeApp(firebaseConfig);
// Initialize Cloud Firestore through Firebase
firebase.firestore();
 
// Add reduxFirestore store enhancer to store creator
const createStoreWithFirebase = compose(
  reduxFirestore(firebase, rfConfig), // firebase instance as first argument, rfConfig as optional second
)(createStore);
 
// Add Firebase to reducers
const rootReducer = combineReducers({
  firestore: firestoreReducer,
});
 
// Create store with reducers and initial state
const initialState = {};
const store = createStoreWithFirebase(rootReducer, initialState);

Notice how createStoreWithFirebase is called instead of createStore and firestoreReducer is passed along with an initial state.