Question

我正在构建我的第一个React.js Flux示例，我正在使用McFly。你在一个输入框中键入一个股票代码符号（由于去抖动的问题，我一直在使用'F'和'K'），然后我使用mini-api获取股票的信息，然后显示价格。代码有效，但我不确定我是否正确执行。当在输入框中输入任何文本时，我会触发updateInputValue操作，但同时我会发送一个API调用。当API返回时，它会使用返回的数据触发updateStockPrice操作。

var StockActions = Flux.createActions({
    updateStockPrice: function(text){
        return {
          actionType: "UPDATE_STOCK_PRICE",
          text: text
       } 
    },
    updateInputValue: function(text){
        API.getStockPrice(function (text, stockPrice) {
            StockActions.updateStockPrice(stockPrice);
        })           
       return {
          actionType: "UPDATE_INPUT_TEXT",
          text: text
       }
    },    
});

http://jsfiddle.net/easilyBaffled/czgm3dp0/6/

API调用是如何在Flux中处理的？特别是他们应该如何处理McFly？

Answer 1

我已经使用McFly好几个月了，而且我还没有看到任何针对McFly的建议。我以类似的方式进行API调用，但具有更高的抽象级别：

创建请求的操作会返回PENDING操作和请求类型，例如return { actionType: 'API_PENDING', type: 'stock-prize' }
在响应回调中创建的操作将返回RESPONSE类型操作或ERROR，两者都使用请求类型进行了丰富，例如 return { actionType: 'API_RESPONSE', type: 'stock-prize', body: res.body }

商店然后根据类型找出要做的事情。它允许你在助手中隐藏很多样板。

关于模式有一篇很好的文章：http://www.code-experience.com/async-requests-with-react-js-and-flux-revisited/

如何使用React.js Flux架构和McFly中的操作处理API调用？

1 个答案: