React, Redux & Firebase App Tutorial #19 - Syncing Data with Firestore

Hey gang, in this React, Redux & Firebase tutorial I'll show you how we can use the firestore reducer to sync our redux store with our firestore data.

----------------------------------------

🐱‍💻 🐱‍💻 Course Links:

🧠🧠 Other Helpful Playlists:

🤑🤑 Donate


🎓🎓 Find me on Udemy

[dbthings]

DUDE PLEASE MAKE A 2020 version of this.Would Appreciate this.

[luisroman]

If you are still having problems, because I know I did, this is how I fixed it using react-redux 6^ and firebase 3^.

//index.js
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
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'


import {createFirestoreInstance, reduxFirestore, getFirestore } from 'redux-firestore'
import { ReactReduxFirebaseProvider, getFirebase } from 'react-redux-firebase';
import firebase from 'firebase/app'
import fbConfig from './config/fbConfig'


const store = createStore(rootReducer,
compose(
getFirebase, getFirestore })),
reduxFirestore(fbConfig)
)
);


const rrfConfig = {
userProfile: 'users',
}
const rrfProps = {
firebase,
config: rrfConfig,
dispatch: store.dispatch,
createFirestoreInstance,


}


ReactDOM.render(
<Provider store={store}>
<ReactReduxFirebaseProvider {...rrfProps}>
<App />
</ReactReduxFirebaseProvider>
</Provider>,

serviceWorker.unregister();



//Dashboard.js
...
import {compose} from 'redux'
import { firestoreConnect } from 'react-redux-firebase';
...

export default compose(
firestoreConnect(() => ['projects']),
connect(mapStateToProps)
)(Dashboard)

[maritaslagyan]

if anyone is still struggling with the whole wrong version thing, all you have to do is just use the same version of react-redux as theNetNinja. open terminal and cd into marioplan and type out: npm i --save react-redux@^5.1.1
After that just restart the application and it should work!

[MrVisheshsingh]

Some of you may be getting a "TypeError: Cannot read property 'map' of undefined". This is because on the initial rendering firestore hasn't had a chance to grab the latest data. You can see the console.log(state) inside mapStateToProps and see that the ordered object is empty initially. To combat this issue, you need to pass a fallback content when mapping state to props like this:

const mapStateToProps = state => {
console.log(state);
return {
projects: || state.project.projects
};
};

[thebeetyblue]

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
import { Provider } from 'react-redux';
import thunk from 'redux-thunk'
import { createFirestoreInstance, getFirestore } from 'redux-firestore'
import { ReactReduxFirebaseProvider, getFirebase} from 'react-redux-firebase'
import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'

const config = {
apiKey: XXX
authDomain: XXX
databaseURL: XXX
projectId: XXX
storageBucket: XXX,

messagingSenderId: XXX
};


const store = createStore(rootReducer,
compose(
applyMiddleware(thunk.withExtraArgument({getFirebase, getFirestore})),
));

const rrfConfig = {
userProfile: 'users',
useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB
}
const rrfProps = {
firebase,
config: rrfConfig,
dispatch: store.dispatch,
createFirestoreInstance // <- needed if using firestore
}
ReactDOM.render(<Provider {...rrfProps}><App /></ReactReduxFirebaseProvider></Provider>,


Also, in your dashboard, replace this in the last line
export default compose(firestoreConnect(['projects']), connect(mapStateToProps))(Dashboard)

[mofekayode]

i am able to add to the database, but i see these empty objects on the console when retrieving. Is there any fix for it ? firestore:

[_ngere]

"TypeError: Cannot read property 'dispatch' of null" am getting this error while trying to connect to my collection. Kindly help.

[unity_with_timoteo]

OBJECT not a function issue????


Solution : After the update from v2 to v3 the code to index must be it:


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { createStore, applyMiddleware, compose } from 'redux'
import rootReducer from
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import { createFirestoreInstance, getFirestore, reduxFirestore } from 'redux-firestore';
import {ReactReduxFirebaseProvider } from 'react-redux-firebase';
import firebase from './config/firebaseConfig'

const middleware = [

]
const store = createStore(rootReducer,
compose(
applyMiddleware(...middleware), reduxFirestore(firebase)

)
);

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

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


ReactDOM.render(<Provider {...rrfProps}><App /></ReactReduxFirebaseProvider></Provider>,

[shakilkhanprogrammer]

If anybody stuck in this video then simply run these two commands
and now restart development server again

[suryaprakashreddy]

Hello Sir, this course is outdated. Can u please add a new course with upgraded versions of firebase.
That could be very helpful.

[jaelmen]

Thanks for your awesome tutorials mr. ninja. I have this error after tutorial #19:
Error: Context from react-redux not found. If you are using react-redux v6 a v3.*.* version of react-redux-firebase is required. Please checkout the v3 migration guide.
Up until now everything have worked out perfectly, exept after i put in the code from #19.

[lwinmoe]

Hi, bro I got error that (type-error:object()is not a function) how can I fix that error, please.

[eugenekhristo]

@The Net Ninja - Hi man! Are you able to remember all this stuff related to bunch of reducers and settings? Or you always look it up before doing? Because to my mind ther're too much stuff is going on and for me it looks like a black box for now (( (things related to firebase and its connection)

[francisconavarrete]

hey, here is what i did: stop the react server, run this in your terminal inside the app folder to get rid of the current dependencies:

npm uninstall react-redux react-redux-firebase redux-firestore firebase

then i just installed exactly the same versions as on his github:

[prabhashswain]

i am getting this error after adding firestoreConnect([
{collection:'project'}
]) TypeError: Cannot read property 'dispatch' of null
please sir help me to solve this one

[RicardoTorres]

I just had an "Ah ha!" moment, that made me realize how powerful this is. Go ahead to your Firebase database, and change/add/remove any record you want from your collection. Whatever you changed will update in your dashboard almost instantly. This is just amazing.

[cemkiray]

ANYONE HAVING ERRORS ! Just run the following commands (downgrade some packages) to make it working:


Then, restart the server if you still get the error.

[Rodrigo-lqiy]

If you are getting the wrong version error, this may help:
I'm not a big fan of downgrading versions or fixed versions for a large number of reasons; it may be a good temporary workaround, but I woulnd't consider it a solution.


import { reduxFirestore, getFirestore } from 'redux-firestore';
// import { reactReduxFirebase, getFirebase } from 'react-redux-firebase';
import { ReactReduxFirebaseProvider } from 'react-redux-firebase'
import { createFirestoreInstance } from 'redux-firestore'


Your store object will look like:


const store = createStore(rootReducer,
compose(
firebaseConfig, getFirestore })),
reduxFirestore(fbConfig),
// reactReduxFirebase(fbConfig),
)
);


Implement rrfConfig and rrfProps objects, and change structure of the element to render


const rrfConfig = { userProfile: 'users' } // react-redux-firebase config


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


ReactDOM.render(
<Provider store= { store }>
<ReactReduxFirebaseProvider {...rrfProps}>
<App />
</ReactReduxFirebaseProvider>
</Provider>,



A silly reminder, but when you upgrade versions, remember to restar server.

[joseblas]

I have a problem that I don't understand the truth
: the problem is for the use firebaseConnect the error is Cannot read property 'dispatch' of null, I hope a help please

[vergelaranas]

Hi Sir. I always followed your tutorial and thank you so much.
Just want to know if you have a latest configuration for the react-redux v6 and v3.*.* version of react-redux-firebase.
I tried follow their guides but i got a lot of error. :D Thanks