This course has been updated! We now recommend you take the State Management with Redux & MobX course.
Transcript from the "Flux Solution: Item Store" Lesson
[00:00:03]
>> Steve Kinney: So we'll set up the item store.
>> Steve Kinney: And the item store is going to now receive these actions and figure out what it needs to do. So we know that we need the event emitter
>> Steve Kinney: And we know, I think that's about all we need right now.
[00:00:25] You know we need the app dispatcher.
>> Steve Kinney: And it's cool to think about like, we know we needed the action creators, cuz they're gonna tell the app dispatcher. And we know we need the store, cuz it's gonna hear from the app dispatcher. So there is a certain amount of I think magic is really great, and we'll see a state management library tomorrow that has a lot of magic and everything just works out of the box, right?
[00:00:53] But sometimes being able to see these things is very useful for conceptual understanding. Versus it works, but I don't really understand why. Which is great when it works, and terrible when it doesn't. All right, very cool, what I'm gonna do right now is I would like to start with some default items, just for my own sanity.
[00:01:11] So I know I needed to make that items array anyway, that I'm going to push and remove from. I had the calculator in the previous example. I'm gonna have an items array that's gonna be in the closure that I'm gonna add items to, change items in, and remove items from.
[00:01:23] So, what I'm just gonna do is I'm just is I'm gonna grab this one, seems like as good as any. Again, cuz I don't wanna break code necessarily, I'm just gonna do a copy paste it first. And then I'll remove it, in a second. So, in the items store we will say let items.
[00:01:39] And maybe this is an empty array.
>> Steve Kinney: Cool, so we have all those items and these needs unique ID. Just because we're creating them here, mostly out of laziness.
>> Steve Kinney: UniqueID, cool, so we've got our items, all right. Now we need to create the item store. So we know it's class ItemStore extends EventEmitter.
[00:02:19]
>> Steve Kinney: We'll have a constructor that needs to call super. Cuz again, EventEmitter does a bunch of self set-up to be able to store the listeners and stuff along those lines. So we have to call that and those green lines right now are because it's a useless constructor cuz I'm not doing anything in it.
[00:02:35] But I'm going to in a second, and I wish it would leave me alone right now. All right, so the item store, is gonna have some methods to it. So we know getItems is definitely the one, okay, I need all of these items. So we'll return the items array.
[00:02:52] The other thing we're gonna do is we got the app dispatcher. We'll say AppDispatcher.register(action -) that comes in. And if you don't write this on the construction, you could theoretically make this a method and just like call the method here as well to register it in the constructor, but I don't mind doing this.
[00:03:18] So we have the three kinds of actions from before. We had add action, update. I'm sorry add item, update item, remove item. So let's go ahead and we'll say, if action type,
>> Steve Kinney: Is ADD_NEW_ITEM.
>> Steve Kinney: Let's make sure my memory is good here ADD_NEW_ITEM, yep. We'll handle this in a second.
[00:03:49]
>> Steve Kinney: Let's get the other two in place.
>> Steve Kinney: And we'll call this one the UPDATE_ITEM.
>> Steve Kinney: And we'll say REMOVE_ITEM. Right, so these are three things that can happen to items in the item store, they're either added, they're updated, or they're removed, that make sense. So the other thing that's gonna come in at any given one of these points is the action.item, right?
[00:04:16] We saw that it was the changed one, if toggle was the action creator, we get the item, itself. If it was removed, then we get the new item, if it is the new item. So, what I'm gonna do is I'm gonna create a bunch of methods. I could do these all theoretically, in these conditionals.
[00:04:32] During the break, I was reprimanded for not using switch statements. I regret nothing. You can't make me.
>> Steve Kinney: So we have addItem, which will be the items, and this should look very familiar from what we're currently doing in application. One of the reasons I'm not running over and copy and pasting is I don't wanna switch files too much.
[00:04:58] And at this point I have written this app so many times, and done this pattern so many times that I can just do it by heart. But we could theoretically go into application and copy and paste some of this logic. And that is probably an equally good idea.
[00:05:10] So we'll say this.omit change, whenever we do that.
>> Steve Kinney: That said, since I am cowboy coding, so maybe better be on the lookout for typos. Cool, we've got updateItem.
>> Steve Kinney: This will be the updated item in this case. Because I'm gonna iterate through all the items again. Remember, I was mapping through all of them and just replacing the one that changed.
[00:05:40]
>> Steve Kinney: Cool, so let's try that. So we'll say items, again, that's the one kind of in the top level scope there on line 6. And we're gonna replace it with,
>> Steve Kinney: Items.map, go through all the items,
>> Steve Kinney: And if the,
>> Steve Kinney: item.id === updatedItem.id,
>> Steve Kinney: Or does not equal it, it doesn't, like really the condition can go either way.
[00:06:11] So if doesn't equal just return that item, otherwise we're gonna return the updated item. So effectively, we're returning new array with the item that we're looking for, replace with the updated one, very cool. And then what do we need to do whenever we change the items array?
>> Steve Kinney: Tell the world, yeah we need to emit('change').
[00:06:32] A lot of times you will see this pulled into a constant so that you can't mess it up. That's a very smart idea. And we'll have removeItem(itemToRemove),
>> Steve Kinney: filter,
>> Steve Kinney: And we'll filter out, we want true stays in, false leaves. So we'll say item.id,
>> Steve Kinney: It'll be true if it is not the right id.
[00:07:06] So this will keep all the existing ones, and then we this.emit
>> Steve Kinney: ('change'). So now we can modify this, right, an action comes in, we change this array as it needs to get changed, either adding them, updating them or removing them, and then we tell the world. The other thing we need to do is just,
[00:07:29]
>> Steve Kinney: Export default.
>> Steve Kinney: Cool, you might be wondering if I'm just making a single instance in exporting it, why didn't I just use a plain old JavaScript object? Mostly cuz I wanted to do inherit from event emitter, right? And I could, theoretically, extend a event emitter and all those kind of things and I can construct an object like that.
[00:07:53] But since I do want to like inherit all of its methods, I'm just gonna create class and instantiate it, all right.