This course will be retired on April 12, 2021.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we'll dive into creating the store that will house our application state. In the scoreboard application, this means registering the combined Player and Stopwatch reducers to the Redux store and providing that store to our app's container component.
Further Reading
[MUSIC]
0:00
Now, we're going to focus on fitting
all of our redux pieces together.
0:04
So, first in this video we're
going to implement the most
0:08
critical component of redux, the store.
0:10
This is done with the help of a react
redux component called provider, that
0:13
takes the store will create and provide
it to all connected container components.
0:17
The store is what will be used as
the primary source of information for
0:22
our school work container.
0:26
The container will then be able to
subscribe to state changes in the store
0:28
and pass that information to
the components housed within it.
0:31
As a quick reminder, a redux store
holds the entire application state.
0:35
It's a composition of all
the reducers we've defined,
0:40
that then becomes one single state
container for our application.
0:42
in the case of our scoreboard application,
our store consists of only one reducer,
0:46
the player reducer.
0:51
So back in our project,
let's open up index digests and
0:53
take a look at how it's
currently constructed.
0:57
So you'll notice that all this
file does currently is render
0:59
our scoreboard component
at the root dom element.
1:02
So in order to provide a redux
store to our application.
1:05
We'll create a store that's
composed of our player reducer and
1:09
past that store to the reactor
redux provider component.
1:12
To get started with creating our store,
1:16
we'll need to add a few
imports to this file.
1:17
The first will import provider
from react redux, like so.
1:19
Next we need to import a helper method
from redux called createStore and the last
1:31
import we have is to the PlayerReducer
file we created in the previous stage.
1:37
So using the utilities provided
from these three imports,
1:50
we are now ready to create our store and
provide it to the rest of the application.
1:53
But first we have to create a store.
1:59
So beneath the imports at
const store = createSre and
2:01
in the create store method
pass PlayerReducer.
2:08
In this case the create store
method takes our PlayerReducer and
2:13
registers it with Redux.
2:17
This means that our PlayerReducer
is now ready to participate in
2:19
the Redux pipeline.
2:22
And for more information about what
create store does behind the scenes,
2:23
be sure to check out the teacher's notes.
2:26
All right, now that we have a store,
the next thing to do is,
2:28
wrap our scoreboard component
with the provider component, and
2:31
set the store property to
the store we just created.
2:35
In the render method,
we'll wrap the scoreboard component
2:38
with a provider where store = store and
2:43
right below the scoreboard component
we'll add a closing provider tag.
2:46
So now you may be asking yourself what the
provider component is actually doing under
3:00
the hood.
3:04
Well at this point, let's just say that by
wrapping our application with the provider
3:05
component we've created a method for any
container component to subscribe to Redux
3:10
data changes, which is essential for
passing data down to other components.
3:14
And I've included more detailed
information about provider
3:19
in the teacher's notes of this video.
3:21
Okay we now have the root of our
application set up to use Redux.
3:23
But our application is still
not using our Redux store yet.
3:27
So coming up in the next video will
connect our school work container to Redux
3:31
package app or action creators and update
the scoreboard containers render method.
3:36
You need to sign up for Treehouse in order to download course files.
Sign up