Check out a free preview of the full Firebase with React, v2 course:
The "React Context API" 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 pulls out the posts into the the React Context API.

Get Unlimited Access Now

Transcript from the "React Context API" Lesson

[00:00:00]
>> Steve Kinney: So let's go ahead. First we are going to pull out the posts into the context API so we can wrap. Simply, this one the only component that really cares about them is this post component. But there could be other use cases as this application grows, so we are just going to try and the pattern in this case and kind of get used to it.

[00:00:19] It doesn't feel right to put it in my components folder, so I'm going to make one additional folder,
>> Steve Kinney: And we'll call this one providers. And we'll make a new component called posts, plural,
>> Steve Kinney: Provider.jsx. And in here, we're going to basically create a component that keeps all of the posts in state, and can then give them to child components for us.

[00:00:53] And we can basically wrap any component in this component. It will receive the posts. So we are going to need a few things in this case, we are going to need
>> Steve Kinney: React and react component. We know that we are going to need firestore in this case.
>> Steve Kinney: Nice try, but no dice from firebase and, eventually, I'm going to need the formater, but we'll pull that in a second.

[00:01:26] Let's do it now. Cool, so we'll go ahead and we'll say class PostsProvider
>> Steve Kinney: Extends a component
>> Steve Kinney: And the nice part about this refactor is that it is effectively a lot of copy and paste action. So we'll go into application, and
>> Steve Kinney: We're gonna want this piece that subscribes to the changes in firestore.

[00:02:04]
>> Steve Kinney: We need the unsubscribe. We're gonna keep track of the posts, and then we never unsubscribed from the off changes, so when we write the user one, we're gonna have to do that as well. So let's go ahead and we'll start with grabbing this in our PostsProvider. We'll say,

[00:02:24]
>> Steve Kinney: The state,
>> Steve Kinney: export default PostsProvider, before I forget.
>> Steve Kinney: So this is, effectively, some of it I'm just retyping, but this is all code right now that is stolen from the application component.
>> Steve Kinney: I'm gonna come on unmounts,
>> Steve Kinney: And then when it comes time to render,

[00:03:10]
>> Steve Kinney: What we're gonna do is we're gonna create a context about our post. So we'll pull that in from react as well,
>> Steve Kinney: And we'll say,
>> Steve Kinney: PostsContext = createContext. What is context? There's an API that kind of exists in react that allow components, basically it allows you to skip the every component must pass stuff down to its children.

[00:03:43] It's basically, some higher level component is wrapped in this provider, and then any of the children can tap in to that context without having to pass stuff all the way down. It's a way to skip to everything being an application component. So only the components that need it can sign up for that piece of state.

[00:04:02] We've seen this before with Redux, and MobX React uses it as well. And we wrap the application, and then when we say, okay, connect and we do the map state to props and everything along those lines that use the older context API. The older context API, which was used by React and MobX, and some of the libraries like that, was kind of unstable and not recommended for general consumption.

[00:04:25] The newer one is now you can use it, so we are going to. All right, so we'll go ahead and we'll render,
>> Steve Kinney: And we're gonna need the
>> Steve Kinney: posts from, this.state. Again, this is, so far, very similar to what we had in the application component. You could theoretically have copied and pasted most of this out so far.

[00:04:59] Where it gets a little bit different is that this component will take some children.
>> Steve Kinney: And it will return the,
>> Steve Kinney: The posts context has two sub components, a provider and a consumer. So here we're gonna provide the posts
>> Steve Kinney: To the children. We're gonna feed the children some posts.

[00:05:36] Except it's context, it's not content.
>> Steve Kinney: All right, and we exported that. That should be everything we need.