React, Redux & Firebase App Tutorial #29 - User Profile Data

Key Takeaways

alright then so now we can log-in we can log out and we can sign up new users now I want to show you something cool in this video first of all I want to logout the state of the application in the nav bar so it logs out everywhere we are so let me go to the nav bar and down here in map state to props when we have access to the store States I'm going to console dot log the state so let's save that and view the state over here in the browser now if we take a look at this we can see we have the firebase property right and we have the earth property we've seen this we've seen that this stores information about the user but this is the firebase all-service and remember not all of the information is stored there we have the email we have the UID but we don't have the first name we don't have the last name and we don't have the initials and ideally when a user is logged in to our application I'd like to access that information about them in case I need it for example the initials we'll need to output up here in the nav bar so how can I get this information well if you remember it's actually stored in firestore inside a user document which corresponds to this user and that user has the ID of this thing that user documents ID is this right so we need to figure out a way to sync that document with that ID to our store state so that we can access it inside the state and we can use it inside one of our components now this might sound like a lot of work and we have to go out and do some fetching from firebase somewhere but actually it's very very easy to do so if I close this I want to go further down here and you can see this thing right here this property called profile inside firebase till now at the minute if we expand that all we see is is empty true is loaded false so there's no profile data in here but what the firebase reducer can do for us that we have inside our project is automatically sync this profile object on the firebase object inside our state you can sync this with the document that we have for that user and it knows how to get that document it knows the ID of that document because it's just the same as this that's why we use the same ID for the document in fire store as we do for the authentication service for that user okay now to set this up is very very easy all you need to do is go to your index.js file over here this is where we apply the react redux firebase enhancer right so what we need to do is just add a couple more properties into this configuration object now the first property I want to attach is use fire store for profile and we're going to set that to true make sure you spell that correctly okay so what we're saying here is okay I want you the firebase producer to use fire store our database to sync to the profile object on the state that we have over here alright that's what we're saying we want you to do that now by default the firebase producer doesn't know which collection to go into it could be a collection called profiles or users or members we've called it users but we need to tell the firebase producer or rather this enhancer that that's what that collection is called so the second property I want to add on here is user profile and here we say the collection name which is users all right so we're telling it where to get the user profile from now and we're saying we want to sync that document inside that collection with the profile object on the state over here so now we've done that let's save it and let's see what happens now if we look inside the state now inside firebase and go to profile now it's no longer empty but we have that document loaded inside the profile so now at any point if someone's signed into the application I can access their profile from this property state dot firebase profile that's cool right so now we could use the initials in the navbar to output them so let's do that let's go now to the navbar and we already have Maps take two props we just want to add a new prop and that is going to be called profile and we'll set that equal to the state dot firebase dot profile like we just saw so now we have access to the profile object so let me grab that up here I'm going to D structure and grab the profile and then what I'll do is I'll pass that down into the signed-in links because that the Sandy links is where we output the initials so let's pass that as a prop I'll say the profile is going to be equal to the profile which we just grabbed which is this thing now we could have mapped state to props directly inside this component what I've chosen to do in the parent component and pass it down as a prop now we have access to that now on our props inside this component so instead of n let's output the profile dots initials oops profile dot initials okay so save that and view this in a browser and we get an error it says profile is not defined and that's because two people are hit we need to say props dot profile don't initials we're taking the props and it's on the props object so save that and view this and now we see LP awesome let's try logging in as someone else let's say Mario that's the net ninja code at UK and test one two three four and we should see MP Walla so this is all working and that is how we can access profile information using the firebase reducer very very simple indeed