Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Reflux - Creating Your First Action in React

2:44 React lesson by

Reflux uses Actions to tell the Stores when to update. We will wire Actions and Stores together to create a simple updatable age field React component.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Reflux uses Actions to tell the Stores when to update. We will wire Actions and Stores together to create a simple updatable age field React component.

Avatar
Denis Stoyanov

Very interesting this technology Reflux but more interesting if you will explain how can I use Reflux with rxjs or baconjs

In reply to egghead.io
Avatar
hipertracker

In general, stores can be used in many components. And the component can subscribe to many stores. It means, stores should know NOTHING about subscribed components states. So I would rather write something like:

var store = Reflux.createStore({
    listenables: [actions],
    onUpdateAge() {
        person.age = Math.random() * 100;
        this.trigger({person});
    }
});

var App = React.createClass({
    mixins: [Reflux.connect(store, 'updatePerson')],
    updatePerson(person) {
      this.setState({person})
    }
    //...
})
Avatar
Ryan

Hey John,

When I try to pass in data to onClick in the component I get an error saying: "Expected onClick listener to be a function, instead got type object" - same as if you pass onClick={actions.methodName()} with parens.

Why is this? And also how do we pass data to these calls? It's probably not a good pattern and that's why but I don't really understand why.

Thanks,
Ryan

Ok so this works:

onClick={() => { actions.updateMessage('this is the message'); }.bind(this) }

but thats just rediculous. if you have a second please let me know best practice on this...

Second Edit:

If anyone has this issue then the following works:

onClick={actions.ActionMethod.bind(this, param)}

no arrow / anon funcs just bind params to the component

In reply to egghead.io

I'm going to use this person, and render him out here in a h2 image tag, by using p, and assigning that to this.state.person. The way we do this is by using the person inside of get initial state, where I return an object with a person property. This is ES6, so ES5 would look like this, where I have a person key, assigned to that person object. But, in ES6, we don't need that, as long as those names match up, we can just say, object person.

Person here is just assigned to p, and I use p.name and p.avatar to render him out. I'll go ahead and add his age through an h2 of p.age. What we're going to do is, any time we click on this, we are going to update it to a random number, using actions.

The way that we do this, is by saying Reflux.createActions, and we will pass in an array of strings. We'll pass in one of updateAge, and this will return an actions object which we can use, so, we'll say var actions, and assign that.

We can take our actions, and put them in the store, by saying listenables, this takes an array of actions. You can pass in multiples actions in here. We'll just use this one. We can say, onUpdateAge, and UpdateAge in this string by convention, just has to match this UpdateAge with, on prepended to the name of it, and then they map up automatically. The string matches up to the name.

We'll say person.age is Math.random*100. Then, we can just say, this.trigger, and pass in an object with that person on it, and that's how you trigger a state change from your store, just like we've shown before. Trigger, triggers the this.setState.

Make sure your mixins are hooked up through Reflux.connectstore. Now, we can add the onClick, and pass in the actions.updateAge. We click on 30, and we get some new random ages, because the state is changing. The click is triggering updateAge, and that matches the name of the string, passed into the actions, which is mapped into the listenables, into the store, and onUpdateAge by convention matches that updateAge string. Then person.Age is a random number, it's triggered which sets the state, and we're done.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?