React-redux-firebase: useFirestoreConnect does nothing

[reggieofarrell]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
Calling useFirestoreConnect produces nothing in Redux. Is it compatible with [email protected]? Other functionality (auth, user profiles, etc) seems to be working fine so my config can't be completely wrong, but maybe I've missed something. I can see firestore in the Redux Devtools, but it never populates with anything. Even just a simple query such as...

useFirestoreConnect([
  { collection: 'users' }
]);

...seems to do nothing. No data, no errors.

As you can see... no actions were fired and the firestore object in Redux is bare.

Calling...

useFirebaseConnect('users);

...does someting, but doesn't actually produce any results at state.firebase.data at all.

Here is the config...

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from 'react-redux';
import firebase from 'firebase';
import 'firebase/firestore';
import 'firebase/auth';
import { ReactReduxFirebaseProvider, createFirestoreInstance } from 'react-redux-firebase'

import AuthIsLoaded from 'components/AuthIsLoaded/AuthIsLoaded.js';
import App from 'App.js';
import store from 'redux/store.js';


import "assets/scss/material-dashboard-pro-react.scss?v=1.8.0";

const fbConfig = {
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
}

// react-redux-firebase config
const rrfConfig = {
  userProfile: 'users',
  useFirestoreForProfile: true,
  enableClaims: true,
}

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

// Initialize firebase instance
firebase.initializeApp(fbConfig)

firebase.firestore();

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

redux/store.js

import { applyMiddleware, createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import reducers from 'redux/reducers';
import apiClient from 'utils/apiClient';

const store = createStore(reducers, composeWithDevTools(
  applyMiddleware(thunk.withExtraArgument(apiClient)),
));

export default store;

redux/reducers/index.js

import { combineReducers } from 'redux';
import { firebaseReducer } from 'react-redux-firebase';
import { firestoreReducer } from 'redux-firestore';

const reducers = combineReducers({ 
  firebase: firebaseReducer,
  firestore: firestoreReducer
});

export default reducers;

What is the expected behavior?
There should be users available at...

const users = useSelector(state => state.firestore.ordered.users)

...or maybe some kind of error in the console?

Which versions of dependencies, and which browser and OS are affected by this issue? Did this work in previous versions or setups?
MacOS 10.15.2
Chrome Version 80.0.3987.149

{
    "firebase": "^7.11.0",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-firebaseui": "^4.1.0",
    "react-redux": "^7.2.0",
    "react-redux-firebase": "^3.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0",
    "redux": "^4.0.5",
    "redux-firestore": "^0.13.0",
    "redux-thunk": "^2.3.0"
}

I hope it's just a dependencies issue that can be sorted out. This library looks really great and I hope to be able to put it to use.

[reggieofarrell]

I figured it out...

I was trying to pull createFirestoreInstance from react-redux-firebase rather than redux-firestore.

I'm really surprised I didn't get any kind of error from that. Is there a createFirestoreInstance export in react-redux-firebase as well?

[prescottprue]

@reggieofarrell No there is not, it would be pulling in undefined. We could/should probably add something in useFirestoreConnect that will throw an error in this situation

[reggieofarrell]

Yeah, I agree. It's an easy mistake to make. That would be helpful for anyone falling down this particular hole in the future. Also, thanks for this amazing library!

[alekseykarpenko]

@prescottprue Hey, I've got similar error related to imports. Im using TypeScript and trying to achieve AppState interface acceptance, using this example: https://github.com/prescottprue/react-redux-firebase/blob/master/examples/complete/typescript/src/reducer.ts

But Im getting TS errors when importing firestoreReducer and FirestoreReducer interface from redux-firestore. So I've tried to pick them from react-redux-firebase and they are still there!! but I've ended up with undefined instead of state.firestore. Could you please help me with advice, what should I do to avoid TS errors and to get the example working? Thanks in advance.

Looks like the library is really great, but Firestore support is pretty unclear for me.

[prescottprue]

@alekseykarpenko Can you open a new issue describing your issue so that we can track addressing it there?

[reggieofarrell]

@prescottprue We can close this if you want. Wasn't sure if you were leaving it open for some reason since you were the one that reopened it.

[alekseykarpenko]

@prescottprue Okay, I will try to provide separate repo with TS included

[maderesponsively]

I figured it out...

I was trying to pull createFirestoreInstance from react-redux-firebase rather than redux-firestore.

I'm really surprised I didn't get any kind of error from that. Is there a createFirestoreInstance export in react-redux-firebase as well?

My setup consists of redux toolkit and redux persist, so i assume the issue was there until I found this post. After a days of wasted time, I noticed that I too was importing createFirestoreInstance from 'react-redux-firebase'. Doh.

Thanks, the weight has been lifted.