-: In the last section, we did some setup
of our Redux application inside the reducers folder.
We're now gonna move over to our SRC index.js file
and wire up those reducers to a new reduce store.
So inside of index.js, I'll first get started
by importing a little helper from the React Redux Library
which we installed a couple of sections ago.
So at the top I'm going to import the provider tag
from react-redux.
Then underneath that
I will import the createStore function from Redux.
And then finally, I will import the combined reducers call
that we just added inside the reducers index.js file.
So we'll import reducers from reducers.
Now this import statement right here
is a little bit misleading.
Remember that we set
up absolute file imports inside of our project.
So by writing simply reducers right here
that's going to try to import the reducers directory.
When we import a directory by default
we get the index.js file from within that directory.
So reducers right here is essentially whatever we exported
from the index.js file.
Now, quick thing to note here, remember
that on Redux we have a lot
of things that get exported from this library.
Same thing with reactory ducts.
So in both those cases, we want to use the curly braces
so that we get just the provider tag right here
and just the create store tag
or excuse me, function right here.
Now, just in case you've never set
up a Redux application from scratch
I wanna give you a quick heads
up as to what's going on with the provider tag.
All right, so quick diagram here.
So this is a diagram of how our application is going to look
after we wire up redux to it.
Here's the app component, and then down here
we've got the comment box and the comments list components.
When we put together the comment box and comment list
we're going to eventually make sure that they are wired
up to our Redux application, and we do so by making use
of that connect function from the react redux library.
The connect function right here talks to our Redux store
or our instance of Redux that contains all of our reducers
and state through the use of that provider tag.
So the provider tag that we just imported
into the index.js file is a React component
that communicates directly with every connect function
that we create inside of our application.
The provider tag
and the connect tag or connect function work together
to give our components direct access to the Redux store.
So you can kind of imagine this connect function right here
reaching back up to the provider tag
and getting access to some piece of state, or
giving that component the ability to call an action creator
and dispatch a new action.
So with that in mind, we're gonna flip back over
to our index.js file
and start doing some setup inside of here.
I'm gonna first get started
by giving myself a little bit more space to work
with inside of the ReactDom.render call.
And then around the app component
I'll place a provider tag.
The provider tag takes a single prop called store
and it's going to be an instance of a Redux store
a or a Redux application.
So to create a new Redux store
we're going to use this create store function right here
that we just imported.
So I'll call Create Store, and into this function
the first argument that we're gonna pass
in will be our list of reducers.
And then the second argument will be our initial state
for the Redux store.
We don't have the initial states
or any initial values to seed our Redux store with
so we're just gonna pass in an empty object like so.
Okay. So that's pretty much it.
That's all we have to do inside of here.
We made use of the provider tag
we called Create Store to pass the provider a store
and we passed our reducers
into the Redux store that we created.
So really quickly, we're gonna flip back over
to our terminal first
and see if our tests are still passing.
Now, note that our tests right now are really
testing our components in isolation.
So in theory, by adding in Redux
it shouldn't really be modifying anything having to do
with our tests.
Now you'll notice it's taking my test suite here.
Just a little bit of time to boot
up. Okay, thank goodness.
There we go.
And then we'll also flip over to our browser really quickly
and make sure the app is still working
inside the browser as well.
So I can refresh the page
and I should see the application still appear
on the screen without any errors.
Very good.
All right, so let's continue.
In the next section
we're gonna start creating our Action creator to
add comments and then wire that up to one of our components
or more specifically the comment box component.
So quick break and I'll see you in just a minute.