javascript – Reflux商店不听动作

编辑：

我现在觉得很傻.问题是我在代码中的任何地方都没有要求我的商店,因此它实际上从未被创建过.

当我调用它正在收听的动作时,我的refluxjs商店没有调用它的回调.这是相关代码：

操作：

module.exports = require("reflux").createActions([
    "createUser"
]);

商店：

var userActions = require("../actions/user-actions");

module.exports = require("reflux").createStore({
    listenables: userActions,

    onCreateUser: function() {
        console.log("onCreateUser called", arguments);
    }
});

触发动作的组件：

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>
        );
    }
});

当我在Login组件中提交表单时,调用submit方法时不会抛出任何错误,但我的商店的onCreateUser方法永远不会被调用.

回流github页面上的示例看起来相当简单,这几乎与在商店中使用listenables属性的示例完全相同.

任何帮助将不胜感激.

解决方法:

由于商店通常连接到某个组件,并且以这种方式需要,因此您可以创建一个只注销到控制台的测试组件：

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 />
    }
});

然后,您可以将此控制台组件放在任何位置,只需对商店进行健全性检查即可.

标签：reactjs-flux,javascript,reactjs,refluxjs
来源： https://codeday.me/bug/20190725/1529353.html