回流商店不听行动

Posted 2023-02-22

【中文标题】回流商店不听行动

【英文标题】：Reflux stores not listening to actions

【发布时间】：2015-01-08 08:28:12

【问题描述】：

编辑：

我现在觉得很傻。 问题是我的代码中的任何地方都不需要我的商店，所以它实际上从未被创建。

当我调用它正在侦听的操作时，我的回流 js 商店没有调用它的回调。以下是相关代码：

操作：

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 属性的示例几乎完全相同。

任何帮助将不胜感激。

【问题讨论】：

感谢您的编辑……您可以把它加粗吗？我觉得和你一样傻，但如果我阅读编辑部分作为解决方案，我会更早发现问题。 :)

@mknecht 我已将编辑加粗并将其移至顶部

【参考方案1】：

由于商店通常与组件挂钩，并且以这种方式需要，因此您可以创建一个仅注销到控制台的测试组件：

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

然后，您可以将这个控制台组件放在任何地方，并检查商店是否正常工作。