Reflux does not listen to actions
Edit:
Now I feel stupid. The problem was that I didn't need my store in my code, so it never got built.
My refluxjs store does not call its callback when I call the activity it is listening on. Here's the relevant code:
Actions:
module.exports = require("reflux").createActions([
"createUser"
]);
Store:
var userActions = require("../actions/user-actions");
module.exports = require("reflux").createStore({
listenables: userActions,
onCreateUser: function() {
console.log("onCreateUser called", arguments);
}
});
The component that triggers the action:
var React = require("react"),
userActions = require("../../actions/user-actions");
var Login = React.createClass({
getInitialState: function() {
return {
name: ""
};
},
updateName: function(event) {
this.setState({
name: event.target.value
});
},
// Action gets called here
submit: function(event) {
event.preventDefault();
console.log("Creating user", this.state.name);
userActions.createUser(this.state.name);
},
render: function() {
var name = this.state.name;
return (
<div className='login'>
<form onSubmit={this.submit}>
<input value={name} onChange={this.updateName} />
<button>Create</button>
</form>
</div>
);
}
});
When I submit the form to the component Login
, the method submit
is called without any error, but onCreateUser
my store's method is never called.
The examples on the reflux github page seem pretty straightforward and are pretty much the same as the example using a property listenables
in a repository.
Any help would be greatly appreciated.
source to share
Since repositories are usually attached to a component and are required this way, you can create a test component that will simply output to the console:
var store = require('path/to/your/store'),
React = require('react'),
Reflux = require('reflux');
var ConsoleLogComponent = React.createClass({
mixins: [
Reflux.listenTo(store, "log")
// you may add more stores here that calls the log method
],
log: function() {
console.log(arguments);
},
render: function() {
return <div />
}
});
Then you can place this console component always and just check the health of the store.
source to share