The Redux store is introduced in this video lesson. Using the createStore() method students will create stores using the appReducer that was created in the last chapter. Once students have created a store, they will dispatch actions to the store and watch it mutate state.
- [Instructor] So far, we've coded all of the reducers required for the ski day counter, and we've combined them into a single function that we've named appReducer. In our last file, we have created a state variable, and we are mutating that state variable using our single appReducer. Now, with Redux, we don't need to use our single appReducer to mutate the state, because the store will manage the state for us. So, in order to incorporate a store, I'm going to go ahead and delete everything in our index.js file from line five all the way to the bottom.
Now, I want to keep our imports here. I want to import our appReducer, our constants, and our initialState. I also want to import the createStore function from Redux. The createStore function is used to build instances of Redux stores, so I'm going to go ahead and do so. I'm going to create a store variable, and I will invoke createStore. Now, at minimum, the createStore expects one argument, and that is the reducer function used by the store, so we'll use our appReducer. And now the store holds state, and the store manages your state.
So we can always look at the current state of a store using the getState method. So I'm going to go ahead and do a log here, and I'll log our initial state. And to look at our initial state, all I have to do is invoke store.getState. Now, by default just using the appReducer, our initial state will be created from all of the default variables that we created in every reducer. So in the goal reducer, our initial state was set to 10, whereas in our ski day reducers, our initial state was set to an empty array.
The store will use the appReducer to help calculate the initial state. Once every reducer is invoked once, the default value for that reducer will be saved as the initial state. The store also has another critical function: dispatch. That's used to dispatch actions that mutate the state. The dispatch method expects an action object. Now remember, an action is just an object with at minimum, a type field. I'm going to dispatch an Add Day action. Add Day actions also require a payload, for the ski day that we wish to add.
So I will add a day at Mount Shasta, at date 2016-10-28. Was it a powder day, no. Was it a back country day, yes. So here, calling store.dispatch and sending this action should add a ski day to the state of all ski days. So let's go ahead and log our current state, and we can use store.getState to see what that is. Great, so at this point, we've created a store.
We can read the state with getState, and we can mutate the state with the dispatch function. So I'm going to go ahead and save this, and navigate over to our terminal. And I'll start the webpack dev server by typing npm start, and we start the dev server on localhost 3000. So going over to the web browser, I can hit localhost 3000, and again, we're doing everything in the console, so I'll need to open up the console by holding Command + Option + J, and here we can see our initial state. If I expand this object, we can see that there are zero ski days, zero errors, a default goal of 10, and looking at the resort names, we have false for fetching, and zero suggestions.
Now, after I dispatched an Add Day action, we can open up this object, and see that we have one ski day. And it happens to be the ski day at Mount Shasta that we just added. So, looking at our code, the dispatch method is used to mutate the state, and the getState method is used to take a look at our current state. Now, we didn't use the initial state that we imported on line 3. The createStore function will also take in an object to use for initial state. Sending the initial state to the store will set up the store initially with three ski days that we have in the initial state json file, so let's go ahead and save this.
Now, I don't need to start the webpack dev server again because it's running. It's listened for my changes. And it's automatically recreated a new bundle. All I need to do is go over to the browser, and looking at the console, we can see that the change has already taken place. Initially, we have three days inside of the allSkiDays array. These three days come from our initial state json document. Now, after we have those three days initially, we still dispatch an Add Day action, so we will see that we have a fourth ski day.
So in the allSkiDays array, the fourth item is our Mount Shasta day. So again, we can use the store.getState method to take a look at the current state, the dispatch method to mutate that state by sending an action to the store, and we can also set up the initial state when we create a store, just by sending the initial state object as the second argument.
- What is Redux?
- Building object and array reducers
- Combining reducers
- Creating a store
- Creating middleware
- Building action creators
- Incorporating React components