React devs might find this archived course helpful to reference, but this course has been updated! We now recommend you take the Firebase Fundamentals course.
Transcript from the "Isolating Database Calls to a Component" Lesson
[00:00:00]
>> Steve Kinney: We have a little extra bonus code here that we don't need, which is that we are still adding it to state manually. And removing it from State manually, whenever we add and remove posts and now we can just delete all that code that we just wrote. Now you might say well why wouldn't I always want this?
[00:00:20] It all really depends, right, if this is, it could be that you might only want to fetch this data once. You might not want to necessarily subscribe to every change, like those queries. You might choose to just fetch it once and have it and store it, it all depends on your use case.
[00:00:36] I would say subscribing to this is fine, because things can come in basically streaming. It does provide some state management challenges that we'll face later, but it's really up to you, all right? If you don't necessarily want to fetch the data all the time, you can fetch it once.
[00:00:53] You can subscribe to the changes, either one of them Firebase allows you to do both which is pretty awesome. So let's go ahead and delete some code. So the first thing is in handleCreate and get rid of this, I don't need the reference to the documents since I'm replacing all the State.
[00:01:15] I don't need to format that, I don't need to set state anymore, I can basically
>> Steve Kinney: Slim it down to a one-liner, which is take the post, add the post to firestore. Firestore will then eventually, the subscription will update stuff, handleRemove again
>> Steve Kinney: That's really all that needs to happen, is change the data store.
[00:01:48] The data store will tell the Application that everything has changed, and it should all work. We have more code to remove, but let's start with this right now.
>> Steve Kinney: Cool, adding works, removing works still for both of them. The nice thing now, too, is theoretically, we don't need to communicate this all the way back up to the Application components.
[00:02:23] Before, because the Application component held on to the State and we had to modify it in the Application component. We basically passed those functions down to addPost into the post itself to remove it. And then let it call back up to modify the Application state. But now because Firebase is in control of it, we don't need to do that anymore.
[00:02:43] So we can probably even get rid of these two methods completely and just put them where we need them. So let's go ahead and do that, so for instance, we can take this Functionality right here, we can go into the Post itself.
>> Steve Kinney: And we can say
>> Steve Kinney: I'm gonna go ahead and make a postRef because I know that the next thing we're gonna do is an update.
[00:03:14] Where I'm gonna wanna change the number of stars on one as well. So what I'm going to do is I'm gonna hold on to that reference so I don't need to write it twice.
>> Steve Kinney: Nope.
>> Steve Kinney: So we'll have the PostRef and then we'll have const remove.
>> Steve Kinney: That'll just be postRef.delete.
[00:03:56]
>> Steve Kinney: And instead of this down here. We'll simply say onClick, just remove it, this Star button I'm about to let you implement update in a second. So just to point it out star's right here, so we have the ability to remove we don't need that onRemove anymore.
>> Steve Kinney: Which means we don't need it here as well.
[00:04:31]
>> Steve Kinney: We actually don't even need onCreate anymore, because we can actually go into the AddPost itself.
>> Steve Kinney: Instead of calling onCreate, we can say firestore.
>> Steve Kinney: Let's see that I imported the right one, yeah.
>> Steve Kinney: Just add it right here, you don't need to pass an onCreate anymore.
[00:05:10]
>> Steve Kinney: Which means I can remove these two.
>> Steve Kinney: Remove these two methods.
>> Steve Kinney: Awesome, I deleted a lot of code, so let's go verify that things work.
>> Steve Kinney: They show up on both, I can delete them on both, right, so it's a lot less code. Once we can just use Firebase, modify the database, and have Firebase tell the Application component what's going on, right?
[00:05:43] So we're still passing the data down, but now because we don't need to necessarily need to pass every function down. And we'll see other ways that we can actually make this really useful as well because we're still passing the data through. By the end of this workshop, we're gonna have some strategies for creating providers in context in higher order components.
[00:05:58] So we don't even necessarily need to do that, but right now we can at least have the actions in place.