Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "Coding Flux: Store" Lesson is part of the full, Advanced State Management in React (feat. Redux and MobX) course featured in this preview video. Here's what you'd learn in this lesson:

The store listens to the dispatcher, modifies the state and emits a "change" event.

Get Unlimited Access Now

Transcript from the "Coding Flux: Store" Lesson

[00:00:03]
>> Steve Kinney: So, the actions go to the dispatcher. Then they've got to go somewhere else, the dispatcher's job is to broadcast things, right? So the next thing we're gonna do is we're gonna create a store. The store is theoretically gonna be the thing that holds the data for our application, right?

[00:00:22] Actions will go to the dispatcher, dispatcher will tell all the stores in our application. And it's easy to think about what are the nouns in your application? The pizza calculator's a little weird, we've got just basically two values. But if you were building a Yelp clone, you would have restaurants.

[00:00:40] You might have a restaurant store. Right, we have a current user store in which is just the current user. We have the campaign store, we have all the different nouns in our application. We likely have a store and the user can do things, and like, change those in some way.

[00:00:58] We'll create a very simple store here, where we'll just call it PizzaCalculatorStore, right. We're using this app cuz it's simple, not cuz it necessarily needs flux in this case. So we'll call this one PizzaCalculatorStore.js. All right, it's PizzaCalculatorStore. It's gonna be pretty easy. What it's going to do is, we need an object that we can create.

[00:01:28] So we are gonna make a class. So what we'll do is, we will export default to class PizzaCalculator store.
>> Steve Kinney: And we're gonna need to do something with this in a second. Because again, actions use a dispatcher, the dispatcher is gonna broadcast into all the stores, but we're trying to build a UI, right, so what's the store eventually gonna need to do?

[00:01:57] Gonna need to tell components that stuff has changed, it's gonna effectively, the same thing that, when we change state in our container components before, that was passing different props in and we were able to re-render. So eventually we're gonna need to tell somebody and we'll get to that in a second.

[00:02:17] What we're gonna do is, we need some kind of event library. Now we're using Webpack which means we can use all of the Node Standard Library out of the box. And so the Node Standard Library includes something called Event Emitter. Event Emitter emits events. So if you've ever done add event listener or On or whatever, it basically gives you the ability to implement that API.

[00:02:39] So we'll pull that in.
>> Steve Kinney: Import event emitter from events. That's not an NPM install. You can also install event emitter if you need a client side and web pack doesn't do this for you. If you have a different build tool, like this is also available on a piano.

[00:03:00] But it's in the node standard library. And so it will say is that the class Pizza Store extends extends the EventEmitter class. And now we have all of the abilities of event emitter. Which means we can say on for a given event. Off if we wanna stop a listener.

[00:03:17] And we can also omit events, which is why it's called event omitter. We do need to do one thing which is implement a constructor. Because event omitter does some set up in the very beginning, so we need to say, super. So like, go call, event omitters, constructor. All right,

[00:03:39]
>> Steve Kinney: It's not a useless constructor. I'm calling super.
>> Steve Kinney: All right, very cool. Now ideally, actions are going to happen here. Actions go to the dispatcher, the dispatcher says, hey everyone, this happens, right? We need to say like different stores in your application are gonna care about different things.

[00:04:00] Dispatcher is gonna tell everyone. That doesn't mean your given store cares about all of them. My current user store in the application I work on doesn't necessarily care about if someone drags in a new module to the WYSIWYG editor, right? Other things in the application do but like the current user stores like, hey did you log in or log out, right?

[00:04:19] Like that's all I really care about and it ignores all of those. So what we need to is we need to listen for different kinds of actions. So what we do is, we say hey, and also like this store, like, the dispatcher is broadcasting stuff but this, we haven't turned on a radio yet, right?

[00:04:38] [LAUGH] We're not listening for anything. So we need to register ourselves with the app dispatcher.
>> Steve Kinney: Now, what we can do in this constructor, we can say AppDispatcher.register. That's gonna take a function where whenever an action comes through, we are gonna call this function and pass the action in, any action.

[00:05:14] Right, this is a very simple example so it is only gonna be actions we care about. What if we were broadcasting some other kind of, if there was also a bologna sandwich calculator in here, the pizza calculator does not care about that, right? It always wants to order zero baloney sandwiches no matter what.

[00:05:29] But we'll take actions that we care about, and the easiest way to see if we care about it is our good friend, a conditional statement. So if action.type equals, I don't know, update the number of people
>> Steve Kinney: Good catch.
>> Steve Kinney: Right, we'll do something with it, right? Normally what you'll see happen here is some amount of state in the flex pattern is usually kept inside this closure, right?

[00:05:59] Inside this file. So we'll see something like,
>> Steve Kinney: And what do we care about? Number of people.
>> Steve Kinney: Ten slices per person, two single labels. Right, it will modify this object. Right, okay, a new update to the number of people came in, very cool. The actions for UPDATE_NUMBER_OF_PEOPLE has a type, and what was the other property that it had?

[00:06:35]
>> Speaker 2: Value.
>> Steve Kinney: Value, right. Okay, so if we wanna update the number of people, what do we need to do? We simply say calculator. The number of people equals the action value. There's one more thing that we need to do which is we're gonna need to notify all of the views that are eventually gonna listen.

[00:07:01] That like hey, I just changed this value in case anyone cares. I changed it, it's different now. So we'll call this .emit. We'll just just call this change. And so that everything that cares can listen for changes on this store. It's only gonna emit this stuff when it's done something it cares about from the dispatcher.

[00:07:19] Actions hit the dispatcher, dispatcher tells everyone. Stores decide whether or not they care, they tell the views that are listening, right. We're gonna do a little bit, you ever see those cooking shows where they're cooking, they're cooking, they're cooking and, like it's going to be a pot roast that takes six hours.

[00:07:37] And all of a sudden, boom, two more conditionals come out? It's crazy. I'm gonna store this in a variable so I can always put it back to where it was.
>> Steve Kinney: Make a copy of it in the beginning. And then reset is just gonna always turn it back into the initial state again.

[00:08:05] So, cool, that's great, you didn't have to watch me type two more conditionals, but hopefully they make sense. When update slices per person comes in, we update the slices per person. When reset comes in, we turn it back into what it should be. Really great and now we'll just export default.

[00:08:28]
>> Steve Kinney: Pizza calculator store.
>> Steve Kinney: I'll actually import that instance. So this.emit came from, anyone wanna take a lucky guess?
>> Speaker 2: Event emitter.
>> Steve Kinney: Event emitter. That's what we inherited from event emitter. We inherited few methods. The ones we care about right now are on, off, and emit. On adds an event listener, off takes it off, emit tells everyone that added an event listener.