Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

    Reflux - Manually Triggering Actions

    John LindquistJohn Lindquist

    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.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    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 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 Just to show all these actions are working, I'll do some set timeouts. Set timeout passing the 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

    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.