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

Key Takeaways

all right then my friends so now we are successfully going out and we're adding projects to our fir store database inside this action Creator right here and that's cool so we can see those projects right here inside the database but inside our application we're still outputting this dummy data which is defined inside our project reducer over here this stuff now we don't want to Output this anymore instead we want to Output this real data inside the database so how are we going to do that well we need to find a way to sync up our Redux state to this data over here now we could do this manually using the Firebase Library going out grabbing the data and updating the state ourselves in Redux but I'm going to show you what I think is probably an easier way and that is to use these packages that we've already installed these things right here Redux fir store and react Redux Firebase in this tutorial just sync in the fir store just this package we'll be using so so the way we can do this is by going to our root reducer and importing something from that Redux fir store package that we can then combine with the other reducers and this is a fir store reducer so first of all let's import that we'll import fir store reducer and that is going to be from Redux hyphen fir store okay so this is a pre-made reducer and that reducer is made foring linking our fir store data with our state in the background and this reducer will know about our Firebase Project online and how to access it because we already passed in our Firebase config to our store in the index file so if we see right here we can see Redux firestore has access to that FB config so it knows which project to connect to which fir store database to connect to and in the background it's going to sync our data from that fir Store to our state now then we need to apply to a particular property on the state so I'm going to apply it to a property called fir store which makes sense to me because this will contain our fir store data so we'll apply the fir store reducer to that property so now in the background this fire store reducer is automatically going to sync this property on the state object to our data in the database it's going to retrieve that data for us and that data is going to be dependent on which component is currently active at the time and what data that component needs that is the data that will be synced in the state by this reducer and we need to tell this reducer and we need to tell this reducer that information in a minute what data we want to sync but that data will be placed on this fir store property on the state object which we will soon see so that is the first step complete we've set up now this fir store reducer now the second step is to connect a component with a fir store collection so we have the fir store reducer which will sync our fir store data with the store state but we also need to say inside our component that we want to connect to a certain collection inside our firestore database and that is the data that will be sync to this property right because right now this fir store user wouldn't exactly know which data to sync from the database if this component was active in the browser say for example the dashboard component it's not psychic we need to tell it which data to sync so let's go to the dashboard inside dashboard over here we'll open this up so we need to connect this component with a single collection in fir store right because there's no point in connecting to every collection downloading every bit of data and putting it on our store State we only concerned with one collection for this component and that is the Project's collection so first of all let's connect this component with fir store so to do that I'm going to come to the top over here and I'm going to import something and that something is called fir store connect and we retrieve that from react Redux Firebase okay so not Redux fir store this time react Redux Firebase because we're buying to react here okay so we've imported that and we want to use this thing as a higher order component at the bottom to connect this component with a fir store collection now if you notice right here we're already using one higher order component but we want to use two here we still want this to map the state to our props and connect to the Redux store but we also now want to use fir store connect to say which collection we want to connect to right here so the way we do this the way we use two higher order components and chain them together is by using the compose function remember we saw that inside the index.js file over here when we composed different store enhancers together we're going to do a similar thing to compose different higher order components together so first of all let's import that up here we'll import compose and that will be from Redux okay so down here let's now use compose to compose connect and also fir store connect together inside this component so the way we do that is by first of all let's cut that and we'll say compose then in parenthesis this is where we compose our different higher order components together and then at the end over here we have our dashboard all right so let us now inside the compose method add in our different higher order components so the first one was this right connect map state to props and the second one is going to be fire store connect okay so this fir store connect thing right here this function takes in an array as a parameter and this array is going to contain a series of objects now we just need one object and this object is going to say which collection we want to connect to okay so we want to connect to the projects collection it can also contain other information and we'll look at that later but for now we just want to pass in this one object to this array right here and the collection it's going to be is the project collection all right so what this is going to do is say okay when this component is active The Collection that I want to listen to is the project collection and whenever this component first loads or whenever the fir store data is changed in the database online this will now induce the fire store reducer to sync the store state with that project's collection in fir store so now whenever the database changes or anything like that if a new item is added changed or deleted this component will hear that because we've connected to that collection and in turn it will trigger the fire store reducer to update the state to to reflect that change so now the state of the store over here on this fir store property when this component is active on the page is going to be synced up with the projects collection in firestore all right so now we've done that I'll tell you what we'll do inside this function we won't change this yet we'll still get the dummy data but inside this function I'm going to console.log the states all right so let's save this and run it in a browser we'll also save this file over here okay so inspect and open up your console and inside here if we look at this last one then we're going to see we have a fir store property now on this thing right here on the states we also have or and project because remember we added on the root reducer or and project these properties and these are controlled by the or reducer or the project reducer but we also have fir store now and inside here we have connected to the projects collection so we can see now the data right here has a projects collection and not just data it has this ordered collection right here which is an array and this is sometimes easier to work with so it orders the data for us if we want to access it that way and it provides us with the raw data from Firebase as well so we can take a look at all the different documents in there if we take a look there should be two inside here we have two different objects and we can see the ID the off first name Etc and the content so now we're syncing that with our store State on the fire store property so that we can access that now inside this component if we wanted to so now when we're mapping our state to the props over here we can actually grab that data from the fir store property instead of this dummy data so let's do that we'll say we want the state then we want the property called fir store then I'm going to go for the ordered collection and we have a property called project which is an an array of the projects so now we're loading in these projects instead of the dummy ones and we don't need to change the template because it's still an array of data they still have a title they still have a body and it's output the same way we're just loading it from a different source so let's save that and see if this works so let's cross over here and now we can see these two projects yashi's egg hunt and house party and these things these are these two things in the database okay so that's all the is to it we've used the fire store reducer which is responsible for syncing our data and in our component we've also used firestore connect to connect to a single collection so that this collection is the thing that is synced to this property on our store then we can access that inside map state to props right here so the projects we receive is that stuff which is synced to our firestore property on the state so now we're retrieving the correct data I think in the next video what we'll do is find out how we can update the project Details page to show Single projects using the real data