Question

我正在研究我的第一个反应/回流应用程序，所以我可能会以完全错误的方式解决这个问题。我试图从回流商店的行动处理程序返回一个承诺。这是表示我是如何尝试这样做的最小代码。如果我在浏览器中显示此信息，则会收到一条错误消息，指出承诺永远不会被捕获，因为启动操作时不会传回onLogin函数的结果。这样做的最佳方式是什么？

var Reflux = require('reflux');
var React = require('react/addons')

const Action = Reflux.createAction();
const Store = Reflux.createStore({
    init: function() {
        this.listenTo(Action, this.onAction);
    },

    onAction: function(username, password) {
        var p = new Promise((resolve, reject) => {
            reject('Bad password');
        });

        return p;
    }
});

var LoginForm = React.createClass({
    mixins: [Reflux.connect(Store, 'store')],
    login: function() {
        Action('nate', 'password1').catch(function(e) {
            console.log(e); // This line is never executed
        });
    },
    render: function() {
        return (
            <a onClick={this.login} href="#">login</a>
        )
    }
});

React.render(<LoginForm />, document.body);

Answer 1

这里看起来有些困惑。

Reflux.connect(Store, 'store')是用于收听所提供商店的简写，并自动将组件状态的“商店”属性设置为商店this.trigger()调用中传递的内容。但是，您的商店从不致电this.trigger，因此您组件状态中的“存储”将永远不会更新。从商店的操作处理程序返回值不会触发更新。
商店应该听取更新其内部状态的操作，然后通常通过调用this.trigger来广播此状态更新。除非明确调用onAction，否则任何组件都不会从商店的Store.onAction获得您返回的承诺（如果实际操作被调用则无关紧要。）
异步工作通常应该在操作的preEmit挂钩中进行，而不是在商店中进行。然后，您应该通过将createAction选项设置为asyncResult来自动创建“已完成”和“失败”的子操作，从而在true中将操作声明为异步。查看Reflux文档here以了解异步事件。异步操作会自动返回promise，当分别调用“已完成”和“失败”子操作时，将调用resolve和reject。这有点自以为是，但这绝对是我认为的回归方式。

从回流商店回来的承诺

1 个答案: