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

Key Takeaways

all right then gangs so then so far we have created our Firebase project and we've also created a fire store right here added a project collection and a document to that project collection we've also in our react app over here created a config file for our Firebase setup and we've exported that Firebase object at the bottom in case we need this somewhere else inside the application so now what we want to do is somehow find out a way to add a new project to our fir store database from our application when we submit the form on the website now we already have a create project action over here and this is where we can make some kind of asynchronous call to do that we just need to finish this up so we want to interact with the fire store here to add a new project so how do we do that exactly well we could use the normal Firebase Library we've just installed to do that that's absolutely fine but instead what I'd like to do is install a couple of packages specifically designed for Redux and Firebase to work together in Synergy and these packages are called react Redux Firebase and Redux fir store now react Redux Firebase that provides bindings to the Firebase Service as a whole and Redux fir store provides Redux bindings for fir store databases in particular in short installing these two packages means that we'll be able to use the Firebase API to interact with our database inside these action creators and it also means that we'll be able to sync up our firestore database with our react store so let's install these packages first of all open up your terminal then npm install and first of all react Redux Firebase oops spell this correctly and then Redux hyphen fir store okay so install both of those and once those are installed we can now use them inside our project so just like we added thk functionality to our store we have to do something similar with these packages so what I'm going to do is open up index.js where we create our store right here and I'm going to import something from each one of these packages so first of all I'm going to import get fir store and this will be from Redux hyphen fir store then I'm going to import get Firebase from react Redux Firebase Okay so we've imported both of these things right here and what we want to do is use them so that we can access the Firebase or fire store API inside this function right here and the way we can do that is by tacking them on to this thing right here so what we can do is actually use a function on this thunk called with extra arguments and this extra argument is going to be an object and inside this object we can pass in different properties now the properties I want to pass in are these two things right here get fire store and get Firebase so let's add both of those in so I'll say get Firebase first of all and then get fir store so now what will happen is inside this thing over here this function because thk allows us to return a function we get an extra argument that's what this thing does over here with extra argument okay it allows us to pass in an extra argument over here which is an object now I want to destructure two properties from that object that we applied over here we applied these two properties to that object get Firebase and get fire store which are going to equal these things over here so what we can do is just destructure those inside curly braces so I could say get Firebase and get fire store and then we can use these two objects right here to interact with our Firebase and fire store but but if we did that at the minute then this is not going to work because these two things don't actually know about our project they don't know the details of it yeah we created in the Firebase config over here all of this setup and we connected to the Firebase project but at the minute we're not doing anything else with it we're not passing that information on to Redux or these things over here so they don't really know about our project so somehow we have to tell these two things these two packages over here Redux fire store and react Redux Firebase we have to tell those things that this is our Firebase config I want you to connect to this Firebase project for us now the way we do that is by using some store enhancers inside this now we've talked a little bit about store enhancers this thing right here this thk is a middleware and when we apply middleware over here like this this returns a store enhancer so we can add multiple store enhancers to a store and the way we do that is by using compose so much like inside our reducers when we have a root reducer which combines several reducers together we can do a similar thing over in the store we can combine several store enhancers together and we do that using a method called compose so first of all let's import compose and we do that from the Redux Library so compose over there then what I'd like to do is before apply middleware I'm just going to say compose and this is a function now let's get rid of the second bracket because this apply middleware this first thing right here this is going to be the first door enhancer that we're composing together with other things so let us now close this off like so that's the composed thing over there then we're closing off create store so that's the first store enhancer right there we want to ose two more so I'd like to now import Redux fir store from Redux fire store and also react Redux Firebase from react Redux Firebase and these are the other two store enhancers so let's add them into the compos method so first of all this thing Redux fire store like so which is a function and then also this thing react Redux Firebase let's copy that and add that in too okay so we're adding in these store enhancers and that's enhancing our store with these packages right so that we can link the two together but we need to pass in our config for our F base in here so that when we're enhancing our store we're passing in that config and therefore when we use these things over here then these things know which project to connect to make sense so let's do that we need to import our config over here from this file so we'll say import FB config from and it's slash then into the config folder then FB config like so so now we can take this configuration and we can pass it into both of these like this all right then so now when we try to use the because we've passed that configuration into these store enhancers right here then these things know what to connect to and since these things now know what to connect to we can go ahead and use this thing get fir store in the next video to connect to our fire store and add a document to our collection