TypeError: Cannot read property 'dispatch' of null

Question

i just got this error after trying to connect my firestore to the reducer and as i noticed that cnt get any data from my firestore so the problem is here in the index.js file because it happened after i was doing the migration between v2 to v3 and that when the error starts so plzz if you can help me find out the problem

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {createStore, applyMiddleware, compose } from 'redux'
import rootreducer from './store/reducers/rootreducer'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import { createFirestoreInstance, getFirestore, reduxFirestore } from 'redux-firestore'
import { ReactReduxFirebaseProvider, getFirebase} from 'react-redux-firebase'
import fbconfig from './config/fbconfig'
import firebase from 'firebase/app'
const store = createStore(
  rootreducer,
  compose(
      applyMiddleware(thunk.withExtraArgument({ getFirestore, getFirebase })),
      reduxFirestore(firebase, fbconfig)
  )
);

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

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

serviceWorker.unregister();

this is my dashboard.js export when added compose the error occured

export default compose(
    connect(mapStateToProps),
    firestoreConnect([
        {collection: 'projects'}
    ])
)(Dashboard)

can you try breakpoint after store is created. probably at rrfProps object declaration part and see if store is undefined? — Kevin Moe Myint Myat
– Kevin Moe Myint Myat, Commented Aug 22, 2020 at 6:00
tried debugging before and after store is created no new errors just this one listed above. — Anthony
– Anthony, Commented Aug 23, 2020 at 3:29
is <App/> should be inside ReactReduxFirebaseProvider ?and another thing, you can write store?.dispatch using optional chaining to avoid throwing the TypeError. — Kevin Moe Myint Myat
– Kevin Moe Myint Myat, Commented Aug 23, 2020 at 14:42
i just fixed it and all wrking fine by putting ``` <App/>``` inside ReactReduxProvider — Anthony
– Anthony, Commented Aug 23, 2020 at 17:41

Joundill · Accepted Answer · 2020-08-24 04:53:23Z

3

I've just fixed it with the help of Kevin Moe Myint Myat by putting <App/> inside the ReactReduxFirebaseProvider as shown below

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

serviceWorker.unregister();

edited Aug 24, 2020 at 4:53

Joundill

7,84113 gold badges40 silver badges54 bronze badges

answered Aug 23, 2020 at 17:47

Anthony

811 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeError: Cannot read property 'dispatch' of null

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related