Creating the Redux Store

[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