3.4 Use Action Creators

In our previous lesson, we created these action creator functions. And we saw how we can use them to dispatch actions to our store which changes the state. And we saw how we can subscribe to those state changes and rerender our application, so that we can actually change the way our sidebar looks when we call these functions. However, it's of course very unreasonable to expect our users to call functions from the console. So let's get rid of that and instead, let's hand some of these functions to our sidebar itself so that it can call them. So our sidebar currently has two properties, the decks and the addingDeck state. Let's add three more properties here, and these will be methods that our sidebar can call. So let's have addDeck, and this is gonna be a function that takes a name. And it's going to do store.dispatch, which of course is the way we make state changes to our store. And we will call the add deck function and we'll pass at that name that we passed into the add deck function that we're giving to our sidebar. Okay, that's good. Now let's also have a showAddDeck. This will be very simple, we will just do store.dispatch, and we'll dispatch the showAddDeck action. And again, we'll duplicate this and change this to hideAddDeck, and we will dispatch the hideAddDeck action. Excellent, so with these three methods on our sidebar now, we have the ability within our sidebar to control our state. Notice though that we don't actually have to give our sidebar direct access to our store. We can just give it this limited functionality, if you will, to create these three specific actions and have them dispatched on our store. All right, now let's see how we can use these actions in our sidebar. All of these actions that we want to take place in our sidebar surround this input element here. So let's begin by adding an onKeyPress event handler to this input. Let's call the this.createDeck function. So we can create this function on our sidebar. We'll say createDeck and of course, this will take an event object and what we're looking for is the Enter key. So we'll say if evt, or event, .which, if it is not equal to 13, which is the key code for the Enter key, then let's just return. Otherwise, let's get the new deck name. So we'll say, name is going to equal, and we can get this element based on this reference. So we can use the ReactDOM library. It has a method called findDOMNode, and what we need to pass it is that reference. So we can say, this.refs.add, and of course, add here refers to the name that we gave the reference on the element we wanna find. So that will return the element and then we can just get the value. So then, we can call, this.props, and we can call addDeck, and we pass it the name. And then we call this.props, and we can call hideDeck. Now, this is actually pretty much all we need in the sidebar. However, the problem here is that addingDeck is gonna be false and we're never actually setting it to true. This is actually going to be in the toolbar that will go above the sidebar. But for now, let's just give our sidebar this capability. This is actually the only reason why we gave our sidebar the showAddDeck method because eventually, the sidebar will not be the one that needs that. However for now, let's just add a button here and we'll just say onClick. Well then, what we can do is call this.props.showAddDeck, and let's just close off our button here and we'll just give it the text New Deck. With this in place, we should be able to add decks to our list. So, if we come back to our page, you can see it's been refreshed and we have this New Deck button. So, if I click this button, you can see our text box appears, I can click in here and add a new deck. And when I hit Enter, you can see, okay, we have a bit of a problem. Our new deck does show up but this does not disappear. And we have an error at the same time, this.props.hideDeck is not a function. So if we can back, let's see, we called hideDeck, this should actually be hideAddDeck, there we go. Our page will once again refresh. I click New Deck, and I click New Deck. I can give a deck a name. I hit Enter. And notice that our deck name is now in the list. And because we're logging the state after every action, you can see the change of it. You can see here that at the beginning, our state has no cards, no decks, and adding deck is false. Then, addingDeck changes to true. Then we add the deck, and now the decks array has an element. However, addingDeck is still true. And then we call hideAddDeck and addingDeck is switched back to false. So you can see how this all works. Now you might recall that I said the reason we're making sidebar an actual react component by way of React.createClass, is because we need to make use of one of the react lifecycle methods. And we're gonna do that now. The method that we want to use is called componentDidUpdate. And this will be called every time this sidebar is rerendered. And what we wanna do every time the sidebar is rerendered is check to see if our input box here is currently displaying. And if it is, we wanna focus on it so that when they click the new deck button, they will immediately be focused in the text box. Now we first, of course, have to get this input, and so I'm just gonna to copy our ReactDOM call here, and let's paste it up in here. We'll change our name to el, and we don't need to get the value. So we're getting this element and then what we can do is say, if el, then we'll say el.focus. It's that simple. So if the element exists, we'll focus. If it doesn't exist, that means it's not displaying right now, so nothing to do. All right, let's give this a try. I'll click New Deck, and notice that I'm immediately focused in the box, and I can add a deck, and I hit Enter, and we have their deck. Let's try again, I can add a second deck and I can add a third deck, excellent. So, even though at this point, our application doesn't do very much at all, we really do have the circle of life as far as our application is concerned. We created the store that we can use to store all of the state for application, both user data and UI data. We created a couple of views that can actually display that data. Then we created some action creators that we can use from our UI to dispatch actions back to our store, which updates our state, which updates our components, which our users can then use to update the state, which updates the components, and the circle continues. So really, we do have a complete application here as far as that life cycle goes. However, we're far from finished with this application. There are a lot of features that we wanna add, and of course, we'll be doing that throughout the rest of these lessons.