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.

+3


source to share


1 answer


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.

+8


source







All Articles