Check out a free preview of the full Firebase with React, v2 course:
The "State Management" Lesson is part of the full, Firebase with React, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve approaches the problem of scaling, should the application grow in size.

Get Unlimited Access Now

Transcript from the "State Management" Lesson

[00:00:00]
>> Steve: Earlier, we figured out how to take all of those actions, like creating a post and removing a post, we took them out of the application component. But still, all of our state is still stored in that top level component. We didn't really, fully solve the problem yet, which is fine.

[00:00:18] We're getting there. But now what we want to do is, this application could grow. I plan on making a lot of money with this application. It's going to grow very big. So what we're going to want to do is be able to figure out a way to be able to pass different pieces of Firebase state to kind of smaller components, right?

[00:00:37] It's not tenable long term to be able to just kind of go ahead and pass everything down. The application is small now, but it could eventually get a lot bigger. And there are whole bunch of different ways we can do this, but we're gonna look at kind of a modern one.

[00:00:56] In the previous version of this course, we hooked the Realtime Database up to Redux. And that approach will still work, that's what you're interested in basically using Redux Thunk. You subscribe to the events and you basically keep dispatching actions, right? You basically have a thunk that just continually dispatches on every update, right?

[00:01:17] We saw the in Coldfire store with the doc changes, we actually have a really great way of doing that. Cuz, we know when it's added or removed, when we get very granular with the actual actions that take place. With that said, we're gonna try something a little bit simpler since we have a few more built in options now within React.

[00:01:41] So what we're gonna do is we're gonna use the Context API, and we're gonna basically pull out this idea of having the user and the idea of having the post. And so we can wrap it around any component that needs the post or the user. So eventually, we are going to do this a few different ways.

[00:01:59] We create a provider and consumer for post and for user for our stateless functional components. And then, we'll also use some higher order components for the ones that have forms, right? Cuz, we'd have to wrap them first, it's just simply pass them into the function would be a lot easier.