Reflux stores not listening to actions

Question

Edit:

I feel silly now. The problem was I wasn't requiring my store anywhere in my code, so it was never actually being created.

My refluxjs store is not calling its callback when I call the action it's listening to. Here is 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);
    }
});

Component that fires 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 in the Login component, the submit method is called without throwing any errors, but the onCreateUser method of my store is never called.

The examples on the reflux github page seem fairly straightforward and this is almost exactly the same as the example for using the listenables property on a store.

Any help would be greatly appreciated.

Answer 1

Since stores usually are hooked up to a component, and be required in that way, you could create a test component that just logs out 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 />
    }
});

You can then put this console component where ever and just have a sanity check that the store works.