Name: Reflux - Manually Triggering Actions
Uploaded: 2015-03-11T12:26:37-05:00
Description: Reflux actions don't need to be used within React components, you can trigger them from anywhere. John demonstrates this concept by extracting the actions away and then invoking them through jquery.

Reflux actions don't need to be used within React components, you can trigger them from anywhere. John demonstrates this concept by extracting the actions away and then invoking them through jquery.

https://app.egghead.io/api/v1/lessons/react-reflux-manually-triggering-actions/subtitles

Reflux - Manually Triggering Actions

[00:00] Using Reflux you don't have to use any sort of react events to trigger actions. You can just manually trigger them from anywhere. I'm going to start this example up using an initial state which returns a message of initial state, which renders right here. You can see it shows in the browser. 

[00:16] I'll create our actions. Just var-action is reflux.createActions with an array of strings of one, two, and three. To hook these actions up to the store I will go down and say listenables, which is an array, which takes my actions. 

[00:38] Then I can just create the handles which look like on one and this .trigger which we'll do to this .setstate on my component, so the message is just one triggered. Then I can duplicate this guy and make on two and say two triggered and on three and three triggered. 

[01:10] Now all I have to do is say actions.one and invoke it, and you can see in the browser it will say one triggered. This is because my actions one triggered on one which sent the message of one triggered down into the component this.state.message and rendered it out. 

[01:35] I'll go ahead and delete actions.one. Just to show all these actions are working, I'll do some set timeouts. Set timeout passing the actions.one function. After one second duplicate this, actions.two, two seconds and actions.three, three seconds. 

[01:59] When the browser saves and refreshes after one second, two seconds, three seconds, you can see each of them are triggered. Now that we're calling all of these manually, let's move them into another file. I'll create a new JavaScript file and name it actions.js.  

[02:15] Basically I'm going to copy and paste or cut and paste these actions into my actions file. I'll use module.exports and just export my actions. Because I do have Reflux in here, I will require Reflux as well. Then I'll just go ahead and require my actions, so var-actions=require actions. Then everything will work just like it did before. 

[02:51] Just to demonstrate you can call these from absolutely anywhere, I'll go ahead and create another file, another JavaScript file, and we'll just call it something else. I'll require jQuery this time. Then I'll also require our actions. Then I'll just switch over to our HTML, set up a button with an id of button. 

[03:22] I can trigger actions too, so now we'll have a button that says, "I can trigger actions too." I'll click on it, and nothing happens. But when I switch over to my something else I'll set up a jQuery, look up the id button, set up a click handler which will just take the event and use an arrow function to call actions.one. 

[03:50] Then switch over to my app and require something else. You can see that once these are finished I can now start clicking on the button, and I'll get one triggered. This is because it's calling one. If I switch it to two, now I can trigger the two action. There's no reactant here. It's just jQuery firing an action which is being handled in the store. 


Reflux - Manually Triggering Actions

Share this video with your friends