Reflux actions and stores can be used with any library. In this video, John shows how to listen to store changes without using React.

Reflux - Using Any Library for Model Changes

[00:00] You can use reflux in any library, it doesn't have to be a react, so let's see if we can do that. We'll add an action with var action, and create a reflux action. Now we'll create a reflux store with var store, reflux create store. Then in our init function, we can this.listento our first action we created.

[00:24] So, this.action here is that action that we already created, and whenever we invoke it, we'll say this.onAction, and set up that on action handler here. We'll just log out onAction. So, now when we invoke this action, just with action and run it, you can see in the console, it logged out onAction.

[00:46] So we invoke the action, and the action is listened to at on action, and then the console logged out onAction. Now, typically you would listen to stored changes in a react component, but you can just say store.listen, then pass in a function that will be called whenever that store is updated, a change is triggered. So, a log out store updated.

[01:11] So, instead of logging something out onNonaction, we just say this.trigger, and then run this. You can see it called store.updated in the console. So, this action was handled in onAction, which then triggers an update on the model, which is listened to in our function, and we say store updated.

[01:32] Now, if we want to pass some data along in our action, we'll just go into our action where it's invoked. We'll just add an object with a property of message that says, "Live long and prosper." So now, when we handle this action in onAction, we'll just call that object data, and in this.trigger we'll pass through the data.

[01:58] Now when we handle it, we'll pass through the data, so in the console, we have an object with a message of, "Live long and prosper." That message is coming through the action, then handled in onAction. The data is being passed along to trigger, the store listens and handles that data, and logs it out for us.

[02:19] From here on out, whatever framework you're using, it's just simply a matter of using store.listen. In that function, whenever a store changes, doing whatever you need to do when that store changes.

Reflux - Using Any Library for Model Changes

Share this video with your friends