0

我正在开发我的第一个反应/回流应用程序，所以我可能以完全错误的方式解决这个问题。我正在尝试从回流商店的操作处理程序返回一个承诺。这是代表我如何尝试执行此操作的最小代码。如果我在浏览器中显示它，我会收到一条错误消息，指出永远不会捕获承诺，因为在启动操作时不会将 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);
4

1 回答 1

2

这里有几件事似乎有点混乱。

  1. Reflux.connect(Store, 'store')是监听提供的商店的简写，并自动将组件状态的“商店”属性设置为商店this.trigger()调用中传递的任何内容。但是，您的商店永远不会调用this.trigger组件状态中的“商店”，因此永远不会更新。从商店的操作处理程序返回值不会触发更新。

  2. 商店应该监听动作来更新他们的内部状态，然后通常通过调用来广播这个状态更新this.trigger。onAction除非显式调用，否则任何组件都不会从 store 中获取您返回的 promise Store.onAction（然后，是否调用了实际操作都无关紧要）。

  3. 异步工作通常应该发生在操作的preEmit钩子中，而不是存储中。createAction然后，您还应该通过将asyncResult选项设置true为自动创建“已完成”和“失败”子操作来将操作声明为异步输入。在此处查看 Reflux 文档以了解异步事件。异步操作会自动返回 Promise，当分别调用“完成”和“失败”子操作时会调用其resolve和。reject这有点自以为是，但这绝对是我认为的预期回流方式。

于 2015-07-14T09:44:18.173 回答