TypeError: Cannot read property 'dispatch' of null

[PravunathSingh]

Hey while trying to integrate firebase with my react application I am facing this issue. The code samples are shown below:

store.js

import { createStore, combineReducers, compose } from 'redux';
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';
import { ReactReduxFirebaseProvider, firebaseReducer } from 'react-redux-firebase';
import { createFirestoreInstance, firestoreReducer } from 'redux-firestore';
// Reducers 
// @todo

const fbConfig = {
    apiKey: "AIzaSyCOZTbiUOpXPS7zlAElaedr8xVAlqj58ls",
    authDomain: "clientpanel-2438e.firebaseapp.com",
    projectId: "clientpanel-2438e",
    storageBucket: "clientpanel-2438e.appspot.com",
    messagingSenderId: "182579766837",
    appId: "1:182579766837:web:fb0758f25a5d5d225df37c",
    measurementId: "G-C78DJK35J5"
};

// react-redux-firebase config
const rrfConfig = {
    userProfile: 'users',
    useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB
};

// Initialize firebase instance and firestore
firebase.initializeApp(fbConfig);
const firestore = firebase.firestore();

// Add firebase to reducers
const rootReducer = combineReducers({
    firebase: firebaseReducer,
    firestore: firestoreReducer // <- needed if using firestore
});

// Create store with reducers and initial state
const initialState = {};
const store = createStore(rootReducer, initialState, compose(window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()));

const rrfProps = {
  firebase,
  config: rrfConfig,
  dispatch: store.dispatch,
  createFirestoreInstance // <- needed if using firestore
};

export default store;

Clients.js

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

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

        if(clients) {
            return (
                <div>
                    <div className="row">
                        <div className="col-md-6">
                            <h2> <i className="fa fa-users" /> Clients</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>
                                <th />
                            </tr>
                        </thead>
                        <tbody>
                            {clients.map(client => (
                                <tr key={client.id}>
                                    <td>{client.firstName} {client.lastName}</td>
                                    <td>{client.email}</td>
                                    <td>Rs {parseFloat(client.balance).toFixed(2)}</td>
                                    <td>
                                        <Link to={`/clients/${client.id}`} className="btn btn-secondary btn-sm">
                                            <i className="fas fa-arrrow-circle-right" /> Details
                                        </Link>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            );
        }
        else {
            return <h1>Loading...</h1>;
        }
    }
}

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

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

And the App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './store';
import Navbar from './components/layout/Navbar';
import Dashboard from './components/layout/Dashboard';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

class App extends Component {
  render() {
    return (
      <Provider store={store}>
          <Router>
            <div className="App">
              <Navbar />
              <div className="container">
                <Switch>
                  <Route exact path="/" component={Dashboard} />
                </Switch>
              </div>
            </div>
          </Router>
      </Provider>
    )
  }
}

export default App;

I have been stuck on this issue for more than two days and I have not been able to find a appropriate solution for this problem. It would be a great help if someone could help me in figuring out this issue. Thank you!

[prescottprue]

It looks like you have not included the ReactReduxFirebaseProvider (React provider for storing extended firebase instance) - this is where your RRF props should be getting passed (currently you just placed them on the rrfProps object and didn't use that object anywhere)

Check the use section of the README for a full example notice the usage of the provider:

// Setup react-redux so that connect HOC can be used
function App() {
  return (
    <Provider store={store}>
      <ReactReduxFirebaseProvider {...rrfProps}>
        <Todos />
      </ReactReduxFirebaseProvider>
    </Provider>
  )
}

[prescottprue]

Closing for now - please reach out if the above does not fix your issue