从回流商店返回承诺答案

【问题标题】：Returning promise from reflux store从回流商店返回承诺
【发布时间】：2015-09-11 11:02:36
【问题描述】：

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

【问题讨论】：

动作不应该有返回值。在存储中的操作处理程序 (onAction) 中，您应该检查凭据并根据您的验证结果，您可以调用另一个操作。所以你可以再做两个动作。一个代表成功，一个代表失败。另一种方法是让您的商店在验证后发送一个触发器，并将验证结果作为您的有效负载。组件应该监听这个 store 事件。

标签： es6-promise refluxjs

【解决方案1】：

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

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

【讨论】：