How to properly connect my react component to firebase database and populate it?

Question

I'm creating a project using Firebase. It's my first time using Firebase and react-redux-firebase. I'm not able to populate my app with firebase data. I have to populate my Clients.js component using clients data in my firebase database. How to do it. I'm following official documentations but still not able to figure it out.

Here is my Clients.js file:

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { compose } from "redux";
import { connect } from "react-redux";
import { firestoreConnect } from "react-redux-firebase";
import PropTypes from "prop-types";

class Clients extends Component {
  render() {
    const { clients } = this.props;

    if (clients) {
      return (
        <div>
          <div className="row">
            <div className="col-md-6">
              <h2 className="">
                <i className="fas fa-users" />
                Users
              </h2>
            </div>
            <div className="col-md-6"></div>
          </div>

          <table className="table table-striped">
            <thead className="thead-inverse">
              <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Balance</th>
              </tr>
            </thead>
            <tbody>
              {clients.map((client) => (
                <tr key={client.id}>
                  <td>
                    {client.firstName} {client.lastName}
                  </td>
                  <td>{client.email}</td>
                  <td>${parseFloat(client.balance).toFixed(2)}</td>
                  <Link
                    to={`/client/${client.id}`}
                    className="btn btn-secondary bg-secondary btn-sm"
                  >
                    <i className="fas fa-arrow-circle-right" /> Details
                  </Link>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      );
    } else {
      return <h1>Loading...</h1>;
    }
  }
}

Clients.propTypes = {
  firestore: PropTypes.object.isRequired,
  clients: PropTypes.array,
};

export default compose(
  firestoreConnect([{ collection: "clients" }]),
  connect((state, props) => ({
    clients: state.firestore.ordered.clients,
  }))
)(Clients);

The Error shows up is not understandable, Here it is:

Uncaught TypeError: Cannot read properties of null (reading 'dispatch')
    at firestoreConnect.js:113:1
    at updateContextConsumer (react-dom.development.js:18747:1)
    at beginWork (react-dom.development.js:19114:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)
    at renderRootSync (react-dom.development.js:22670:1)

The above error occurred in the <Context.Consumer> component:

    at FirestoreConnect(Connect(Clients))
    at div
    at div
    at div
    at DashBoard
    at Routes (http://localhost:3000/static/js/bundle.js:115970:5)
    at div
    at div
    at Router (http://localhost:3000/static/js/bundle.js:115903:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:115383:5)
    at Provider (http://localhost:3000/static/js/bundle.js:112826:20)

Uncaught TypeError: Cannot read properties of null (reading 'dispatch')
    at firestoreConnect.js:113:1
    at updateContextConsumer (react-dom.development.js:18747:1)
    at beginWork (react-dom.development.js:19114:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)
    at renderRootSync (react-dom.development.js:22670:1)
(anonymous) @ firestoreConnect.js:113
updateContextConsumer @ react-dom.development.js:18747
beginWork @ react-dom.development.js:19114
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:7
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7

What is the issue?

Answer 1

I have resolved the issue, following are the mistakes that I made in my project:

1)I didn't add ReactReduxFirebaseProvider and react-redux-firebase Props(rrfProps) in my App.js, so for this the solution is like this:

.
.

import { rrfProps } from "./store";
import { ReactReduxFirebaseProvider } from "react-redux-firebase";
.
.
<ReactReduxFirebaseProvider {...rrfProps}>
        <Router>
          <div className="App">
            <AppNavbar />
            <div className="container">
              <Routes>
                <Route exact path="/" element={<DashBoard />} />
                <Route exact path="/clients/add" element={<AddClient />} />
              </Routes>
            </div>
          </div>
        </Router>
      </ReactReduxFirebaseProvider>

2)after this I defined rrfProps in my store.js, like this:

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

for the above, don't forget to import firebase, createFirestoreInstance, and other required modules:

import firebase from "firebase/compat/app";
import { createFirestoreInstance } from "redux-firestore";

This way I was able to connect my React app with Firebase. The issue was that I didn't implemented it in my topmost component App.js properly. I hope this issue is resolved for everyone now...