-: In the last section, we wired up our comment box component
to the redux side of our application.
And the instant we did that
we started seeing a ton of our tests start to fail.
In particular, I wanna point
out that same error message that we looked
at just a moment ago, at the end of the last video.
So right here it says, could not find store
in either the context or props of connect.
Either wrap the root component
in a provider or explicitly pass the store, blah, blah.
You can read, you get the idea.
So let me be really clear about what's happening here.
When we put together a React Redux application
we expect to see a structure
like this right here.
At the very top we've got that provider tag
which has a instance of a Redux store.
That provider tag then renders our app component
which in turn renders every other component
inside of our application.
Now here's the key part.
When we wrap a component with a connect function
that connect function expects to see some parent component,
within this hierarchy right here, that has the provider tag.
So the instant we put this provider tag, or excuse me
this connect tag right here, or this connect function,
it's going to look up
at the hierarchy and try to find that provider.
That's what we want to have happen.
Now, if we flip back over to
our application inside the browser,
this still works just fine.
So what that tells us is
that inside of our normal development environment
like our normal application
everything that we have works just fine.
It's specifically in our test environment
that this flow starts to break down.
So let's figure out why.
Well, if we go back over to our comment box dot test file
so components tests, comment box dot test
we are importing the comment box component by itself
and then we try to render that component
by itself in isolation.
And so essentially what we're doing inside
that test file,
is just taking that component,
right here and we're just kind of throwing it off
into the wild.
And it has absolutely no connection or any tie whatsoever
to any provider tag or any store above it.
And that's why we're seeing this error message right here.
There's no store or provider tag
in the context or props of that component.
And so the component throws an error
because it always wants to see a provider tag
or a store in its parent hierarchy.
So that's what's going wrong right now.
So now we need to figure out a way to fix this,
and that's the fun part.
So there's a couple of obvious ways
of fixing this and a couple of less obvious ways.
Let's first tackle what might be the most obvious way
of fixing this problem.
So inside my comment box, dot test, dot js file
one thing that we could possibly do is to just
import all that stuff that we just imported
into the index dot js file.
So I encourage you not to write this stuff out.
I'm just gonna very quickly show you one possible way
of solving this.
So we could import,
create store from Redux,
we could get our provider tag
from React Redux,
and then we could also get our reducers.
And then when we render our comment box right here
we could just very distinctly
very forcibly say, hey, you know what?
Comment box you're gonna get wrapped with a provider tag.
So now you can't complain
that you can't find a provider, because you know what?
It's your immediate parent.
And so then I'll call store is create store,
I'll pass in my reducers an empty object like so.
Okay, again encourage you not to write this out.
I just wanna very quickly show you one way of solving this.
So now I can save this file, flip back over my tests
and I'm really going to expect these all to now pass,
because now my comment box component knows
about the component hierarchy above it
and it sees that provider tag and it says, great,
I've got my store, I've got the provider, I'm good to go.
And so we can see that,
yep, comment box,
all set.
So this is one way of solving this problem,
but it's also probably the worst way.
You see what's going wrong right here is that now inside
of every test file that we put together,
we would have to import
these three different pieces right here,
and then set up the provider tag.
In addition, if we ever change the way
in which our Redux store is created, by say
adding in middleware.
So let's say we also call apply middleware down here
and we pass in some sets of middleware.
Well, as soon as we start to add
in more middleware to our application
we'll have to go around to every single test file
and modify this, apply middleware function.
So essentially, this approach right here, while it works
doesn't really scale that well because it's going to
mean that we're gonna have to duplicate the setup code all
over the place inside of our application,
and we're gonna have to always keep it
in sync with whatever is going on
with the actual application inside of index dot js.
So this is really not the best solution.
So I'm gonna very quickly undo the additions
that I just added in right here,
and I'll remove the import statements as well.
Okay.
So instead we're gonna use a slightly different approach.
And like I said, there's more
than one way to solve this problem.
We're just gonna pick what's probably the most
straightforward and simple way.
So the first thing to realize here is that right
now we are creating our provider tag
inside of our Route index dot js file.
So this file right here really knows
about how our provider is set up
and how our Redux store is set up as well.
That's where all this logic lives right now.
So I'm gonna suggest
that we refactor this file right here just a little bit
and make the process of creating the provider
and our Redux store, take all that logic
and put it into a little helper function inside this file.
Then we can use that function immediately to
start our app right up right here.
But we could also import that function
into other test files inside of our application and use it
as a way to set up all these other distinct components
and make sure they have that provider
with the Redux store inside their parent hierarchy.
So essentially, we're gonna go
for something that looks like this.
So here's our comment box dot js file, excuse me
comment box dot test dot js file.
It's going to import our comment box component.
And then it's also going to import a little helper function
from our source index dot js file.
And that helper functions sole purpose is going to be to set
up the Redux store and the provider tag,
and it's going to accept any arbitrary child
component that we pass it.
So inside of comment box
we can make use of that little helper function
and pass it our comment box and say,
hey just take this random component right here
and use it as a child to the provider tag.
So, that's gonna be our strategy.
Let's take a quick pause right here
and we'll start to implement that in the next section.