prescottprue / react-redux-firebase

Redux bindings for Firebase. Includes React Hooks and Higher Order Components.
https://react-redux-firebase.com
MIT License
2.55k stars 556 forks source link

"cannot read property dispatch of null" #940

Closed Dhanushreddy09 closed 3 years ago

Dhanushreddy09 commented 4 years ago

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

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

{''} Clients{''}

{clients.map(client=>( ))}
Name Email Balance
{client.firstName} {client.lastName} {client.email} ${parseFloat(client.balance).toFixed('2')} Details
        )
    }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);

and store.js file import React from 'react' import { render } from 'react-dom' import { Provider } from 'react-redux' import firebase from 'firebase/app' import 'firebase/auth' import 'firebase/firestore' // <- needed if using firestore // import 'firebase/functions' // <- needed if using httpsCallable import { createStore, combineReducers, compose } from 'redux' import { ReactReduxFirebaseProvider, firebaseReducer } from 'react-redux-firebase' import { createFirestoreInstance, firestoreReducer } from 'redux-firestore' // <- needed if using firestore

const fbConfig = { apiKey: "AIzaSyB-pyEKd5G3XqLokxcYsa66UsG8a_y0gMA", authDomain: "reactclientpanel-27246.firebaseapp.com", databaseURL: "https://reactclientpanel-27246.firebaseio.com", projectId: "reactclientpanel-27246", storageBucket: "reactclientpanel-27246.appspot.com", messagingSenderId: "466401447116" }

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

// Initialize firebase instance firebase.initializeApp(fbConfig)

// Initialize other services on firebase instance // firebase.firestore() // <- needed if using firestore // firebase.functions() // <- needed if using httpsCallable

// 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 }

// Setup react-redux so that connect HOC can be used function App() { return (

) }

render(, document.getElementById('root')) export default store;

prescottprue commented 4 years ago

Hey, thanks for reaching out. It is a bit hard to tell what is going on from the current syntax highlighting of your example. Could you provide a full example of the issue in a full repo or a tool like codesandbox?

prescottprue commented 4 years ago

Ping - waiting on a full repro