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

Question

我正在构建我的第一个React.js Flux示例，我正在使用McFly 。 您在输入框中输入股票代码（由于出现反跳问题，我一直在使用“ F”和“ K”），然后使用迷你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/

这是在Flux中处理API调用的方式吗？ 特别是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/