React, Redux & Firebase App Tutorial #17 - Connecting Redux to Firebase

Hey gang, in this React, Redux & Firebase tutorial we'll use a couple of third-party packages to connect to Firebase and Firestore from Redux.

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

🐱‍💻 🐱‍💻 Course Links:

🧠🧠 Other Helpful Playlists:

🤑🤑 Donate


🎓🎓 Find me on Udemy

[dorlevi]

Updated index.js code for 2020:


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/rootReducers";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import {
reduxFirestore,
getFirestore,
createFirestoreInstance
} 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(
getFirestore, getFirebase })),
reduxFirestore(fbConfig)
)
);


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


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

);


serviceWorker.unregister();

[muhammadfaateh]

be careful guz react-redux-firebase have its breaking changes you might fell into
`typeerror object(...) is not a function` something like this issue

you can install exact packages to be safe from gettting error or you can look into updated documentation

[bassemlabbassi]

all you need to fix the problem of “TypeError: Object(…) is not a function” is typing:
1- npm uninstall react-redux
2- npm uninstall react-redux-firebase

[Canardeur]

For those like me who got stuck at this video in November 2019 with the same problem as I, here is how I solved it.



./config/fbConfig.js:


import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/analytics'
import 'firebase/auth'


export const fbConfig = {
BLA BLA BLA
}


// Initialize Firebase

firebase.analytics()
firebase.firestore()


export default firebase





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 { reduxFirestore, createFirestoreInstance, getFirestore }
from 'redux-firestore'


import { ReactReduxFirebaseProvider, getFirebase }
from 'react-redux-firebase'


import firebase, { fbConfig } from './config/fbConfig'




const store = createStore(
rootReducer,


compose(
applyMiddleware(
thunk.withExtraArgument({ getFirebase, getFirestore })
),


reduxFirestore(firebase, fbConfig)
)
)




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




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

)


serviceWorker.unregister()





Hope this helps.

[TechnoDB]

As per the new update to those packages, your index.js file should setup like this :
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { createStore, applyMiddleware, compose } from "redux";
import rootReducer from
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import { ReactReduxFirebaseProvider, getFirebase } from "react-redux-firebase";
import {
reduxFirestore,
getFirestore,
createFirestoreInstance,
} from "redux-firestore";
import fbConfig from "./config/fbConfig";
import firebase from "firebase/app";

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

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

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

</React.StrictMode>
</Provider>,

);

[xAndy]

And this is why developers earn huge salaries.

[canzoroglu]

I really would like to hear from an experienced developer that whether all of these tools facilitate the development process or complicate it. Were projects created before these tools insufficient or unsuccessful? Have these tools introduced more complexity than benefit? I think most of people here, including me, like people who lived 200 years ago and have ridden horse to travel. Then, someone gives them airplane to make them travel faster. I think those people would have been frustrated more than pleased. I have similar feelings for these development tools.

[KaiTan]

As this is outdated, are these video instructions and code from


still safe to use in production app?

[irupertbennett]

For anyone else following along to this tutorial, here is my solution using react-redux-firebase v3.*.*


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, reduxFirestore } from 'redux-firestore'
import { ReactReduxFirebaseProvider, getFirebase } from 'react-redux-firebase'
import firebaseConfig from './config/firebaseConfig'
import firebase from 'firebase/app'

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

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

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

);

serviceWorker.unregister();

[vasyapupkin]

how many packages will be installed at the end of the series to just sync data?

[sauravjain]

Itni badiya series chal rahi this react and redux ki ye firebase ne aake sara maja kharab kardiya,


firebase ki jagah express/mongodb hota to maja aa jata...

[MrRicharddaniel]

Hey net Ninja, is it possible if you could explain these concepts in a mern stack? I am sure most of your audience is javascript oriented so understanding redux with a node js backend would be much more simpler. Redux is already not that easy and firebase kinda adds more boilerplate to the already existing excessive boilerplate. I am sure learning redux would be much easier with an actual javascript backend as we will be able to connect the dots a lot better.
Please consider this once.

Anyway, out of all the redux tuts over youtube, yours is by far the one that makes the most sense so thank you so much for that. However, please see if you can make a mern stack with redux video. That would be much simpler in my opinion and I am guessing it would make a lot more sense for a lot more people here including myself.

[syedsaad]

hey @thenetninja i am your very olad student by far i have been trying to convert your class components using hooks and trying to do it in modern way but somehow i am unable to configure firebase and export it and stuff... i even saw your new react firebase course but it includes context api not redux thunk with action creators... i have searched everywhere but can't get any idea to it.. please upload this course for 2022 i will highly appreciate that sensei..

[CardinalHijack]

Hmm, its a bit of a shame redux-firestore and react-redux-firestore were used here. I dont think they are necessary. Its another dependancy to think about and another dependancy to remove some of the understanding of whats going on. Plus, it now makes it more confusing for people if they ever want to stop using firebase.

[toddherron]

*NOTE: THIS VIDEO IS A REACT-REDUX-FIREBASE **_v2.x.x_** CODING PATTERN*

*"npm install react-redux-firebase"* will install _v3.x.x_ unless you specify otherwise and your coding pattern will not match your installed version.

To check which version you have installed, type in *"npm ls react-redux-firebase"*

[jamievaughn]

Any chance that you are going to update this to work with v3+ of react-redux-firebase lib?

[okoiful]

This is not working, error: TypeError: Object(...) is not a function - i think its due to v3.. any chances you update this video @theNetNinja ?

[yevheniivovk]

If you have issue with with reactReduxFirebase -> Object is not a function. Fast solve of that its downgrade react-redux-firebase to second version in my case 2.2.4 helped me.

[kunalpatil]

getFirestore is not function i am facing this error

[venusirpuram]

you all guys are lifesaver who have took efforts to solve the problem and share the results so others don't have to face the difficulty solving it and can use their time doing other productive tasks...

Thank you once again :-)