Instructor: In the last section we spoke
about how our commentbox.test.js file is
currently breaking because our comment box is being rendered
inside that test file without a redux store
or a provider tag in its component hierarchy.
Now at the end of that section, I had said we
were gonna put some new helper code directly inside
of our index.js file.
We're gonna make a little change to that and we're
going to instead create a new file called root.js.
The reason that we're gonna do this is just to make the code
that we're gonna write a little bit more clear
for you just to understand exactly what's going on.
So just a little bit of a change there.
So let's get to it.
We're gonna first get started
by making this root.js file.
We're gonna make the file and I'll very quickly figure
out exactly what's gonna happen inside there.
So inside my SRC directory
I'm gonna make a new file called root.js
and inside of here we're going to create
and export a component that creates our provider tag
and our Redux store.
So we're not gonna put this logic
inside the index.js file anymore.
We're gonna play to sit all inside
of root.js and then the index.js file
and all of our component tests will make use
of this new root.js thing.
Let's write out the code and then you'll very quickly go
to good idea of what's going on.
So to get started, I'm going to flip on over
to my root.js file and I'm gonna import a couple
of different functions from a few different libraries.
So it'll import the provider tag from React Redux.
I will import Create Store from Redux.
I will import our reducers from Reducers.
And at the very top
let's not forget to import React from React as well.
It's now down at the bottom of the file.
I will create
and export a new functional React component like so.
So inside this thing I'm gonna create a provider tag.
Again, I'm gonna pass it a store prop of create store
with our reducers and an empty state object.
I'll then close off the provider tag and then here's where
things get a little bit crazy.
Okay, here's the confusing part.
This is a React component right here that we are creating.
So as a React component, it will be called
with a props object.
Inside of the provider tag right here,
we're gonna place a set of curly braces to say
that we're gonna make a JavaScript expression inside
of here, and then we will reference props.children
like so.
And you'll notice that I'm getting
an error message right here.
I did not close off my provider tag.
There we go.
Much better.
Okay, so now let me reformat this really quickly.
There we go.
So now anytime we create an instance of this root
component, we're gonna create our provider tag
and create our Redux store at the same time.
Now, the props.children thing right here
is a React construct or it's a feature of React.
If you've never made use of props.children before
it allows us to take this component we just created
and use it to wrap other components.
So let's get a quick demonstration of how this is now used.
I'm gonna flip back over to my index.js file.
Now inside of here we've got all
of our imports for provider Create store and reducers.
We don't need any of that anymore cuz we are going
through all that work inside the root.js file.
So I'm gonna delete the import for provider create store
and reducers, and then I will replace it
with an import for the root component that we just created.
Now inside the ReactDOM.render call
I will replace the provider tag with root like so.
Okay, so now what's going on?
When our application first starts up
it's going to try to render an instance
of the root component
and the app component will be passed to the root as a child.
So when the root component gets rendered
it will receive this app component
on the props property of props.children.
So you can kind of imagine
that this code right here is a hundred percent equivalent
to saying that right there.
So we just take props.children, which is a reference
to the app component that we just created
inside that other file and it will display it right here.
So in total, what this root.js component does
is it allows us to create a provider tag
with the Redux store and on the fly we can swap
out the component that is gonna be placed
inside the provider tag.
So now we can still use this provider tag
and our Redux store for powering our very real application
but we can now flip on over to our comment box.
And now over here where we create our comment box file
inside the commentbox.test, or excuse me
comment box component inside the comment box test
file right here, we can wrap this comment box
with that same root component.
And so now the comment box can have a store
inside that provider tag in its parent hierarchy
which is gonna get that error test message to go away
cuz now the comment box is going to think that it is really
truly a part of a Redux application.
And so it's going to go back to being in this type
of situation right here.
Now in truth, it's really going to be in our test
file a little bit closer to this.
So the test file, this is what's going on
There is no app component inside the test file is just
the comment box being wrapped by the provider
with our Redux store.
But the rest of our application, like the real application
that runs in the browser is gonna be like this right here.
So the provider that is placed inside the root tag
will display the app component and the app component
in turn shows the comment box and the comments list.
All right, so that's the idea.
Hopefully it makes sense now.
It's now the last thing we have to do inside
of our commentbox.test file.
We will import that root tag
and wrap our comment box with it.
So inside the comment box I will import root
from root and then I will wrap the comment box with root.
So now the comment box is happy cuz it's got a provider tag
or something that contains a provider tag
and that provider tag as a store.
So now it's the moment of truth
I'm gonna save all these files and then I'll flip back over
to my terminal and see how our tests are doing.
So back over here, tests are going, tests are going
we should probably see the app component finish up first
and then we'll very quickly see the comment box succeed
in running its test after that.
Okay, so there's our app test file
and then the comment box will kick in here.
Just a second as well.
Awesome. So we're now passing on both fronts and best of all
we're passing with a very reusable solution right here.
So now any component inside
of our application that needs access
to a Redux store can just make use
of this root thing right here and it's
off to the races, it's good to go, no issue whatsoever.
Any component that is wrapped
by the root tag is going to automatically think
that it is part
of a Redux application and it will run just fine.
So this is definitely good progress.
Let's take a break right here
and we'll continue in the next section.