Reflux - Aggregate Stores
Reflux allows stores to listen for other stores to update. This helps you build more complex data models. In this video, John walks you through building a store which can watch for data updates in two other stores.
[00:00] Reflux allows you to create a store which can listen to other stores, so you can build a complex data model which can listen to the changes of smaller, simpler data models. We'll start our demo by creating an updateAge action, so Reflux.createAction, and an age store which will listen to this updateAge action.
[00:23] Then in our init function, we'll set up a this.listenTo the updateAge action, and a this.onUpdatedAge to handle when that action updates. So, onUpdatedAge, we'll pass in some data and then just log out that data. Then, we we invoke updateAge, pass in an age property on an object, we'll log this out and you'll see an object with an age of 50.
[00:56] Now, if I create a person store, which is Reflux.createStore, then in init, I can say this.listenTo(ageStore). Then we can handle this onAgeStore, which is listening to the store change, and onAgeStore. Then we'll just console.log(ageStore), updated. Then also log out data.age because we're going to pass along a data object that has the age.
[01:30] Instead of console.log(data), we'll say this.trigger(data), which will trigger the update on the age store, and you can see this updateAge action is handled in the age store, then the data is triggered. The store changes, then the person store listens to this store, takes the data and then logs it out.
[01:50] To create an updateName action, I can basically duplicate a lot of what I did with age. Duplicate updateAge, change it to updateName, then duplicate the ageStore, change it to nameStore, updateName, onUpdateName, onUpdateName. Then I can just call updateName, pass in a name of "John," and we'll set up our person store to listen to our name store as well, this.onNameStore.
[02:24] Then we'll just duplicate the age store handler, say onNameStore, and change this to nameStoreUpdated and data.name. When we run this, you can see we get ageStore updated to 50 and nameStore updated "John."
[02:42] But what we want to do is have one handler handle both of those stores changing. We'll delete these guys, and we'll add a person object on our person store, give him a name of empty string and an age of 0Then we'll just say this.onPersonUpdated for both of the listenTos.
[03:05] This way, when either store gets updated, they both go through this onPersonUpdated handler. So pass in the data. Then, because of ES6, we can deconstruct the data, get the name and the age off the data. If you're not familiar with this, it basically pulls name and age off of whatever object is on the right-hand side of the equals sign.
[03:28] Then we'll say this.person.name is equal to name, unless that's undefined, then we'll just leave it as the original name, and this.person.age is equal to age unless that's undefined, and we'll just assign it to this.person.age and keep it the same. Then we'll just log out this.person, and we'll see how this works now.
[03:50] Because we called updateAge and passed an age of 50, we've got object name with an age of 50 but an empty string, and then updateName with a string of "John," now it's the same person with the string of "John." We'll update the name a couple more times, so "Frank," and update the age to like 30 and 35, and update the name again to "Sally."
[04:16] You can see that our person store handles both the age store and the name store changes. So age of 50, John, Frank, 30, 35 and Sally.