React-Redux-Firebase and Redux-Firestore not populating my Redux state with data

Question

I am a beginner using the above 2 libraries. I have some dummy employees data on my cloud firestore which I would like to get using react-redux-firebase and redux-firestore.

I have configured the redux store and added in the reducers but no employees data are visible in my redux state. I don't see any error in my codes. Anyone can help? Thanks

My codesandbox link is below... It is a very basic app which I have created to try out the above libraries

https://codesandbox.io/live/VOxppz

My Firebase setup

import firebase from "firebase";
import "firebase/firestore";

const firebaseConfig = {
  apiKey: "AIzaSyD564gkWOpSYks8wxOmWNwGsG-555uvBDg",
  authDomain: "test-3babb.firebaseapp.com",
  databaseURL: "https://test-3babb.firebaseio.com",
  projectId: "test-3babb",
  storageBucket: "test-3babb.appspot.com",
  messagingSenderId: "911931804634"
};

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

export default firebase;

My Redux store

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import { reactReduxFirebase, getFirebase } from "react-redux-firebase";
import { reduxFirestore, getFirestore } from "redux-firestore";

import firebase from "../../config/firebase";
import rootReducer from "../reducers";

// Refer to App.js for wrapping of App component

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

export const configureStore = preloadedState => {
  const middlewares = [thunk.withExtraArgument({ getFirebase, getFirestore })];

  const middlewareEnhancer = applyMiddleware(...middlewares);
  const storeEnhancers = [middlewareEnhancer];
  const composedEnhancer = compose(
    ...storeEnhancers,
    reactReduxFirebase(firebase, rrfConfig),
    reduxFirestore(firebase)
  );

  const store = createStore(rootReducer, preloadedState, composedEnhancer);

  return store;
};

My Redux Reducer

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

import authReducers from "./authReducers";

export default combineReducers({
  auth: authReducers,
  firebase: firebaseReducer,
  firestore: firestoreReducer
});

Answer 1

I forgot to connect firestoreConnect to my component. Once that is done, the data flows into my component. Issue Resolved. Thanks