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.
[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