代码之家 › 专栏 › 技术社区 › EasilyBaffled

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

reactjs-flux reactjs api facebook javascript

EasilyBaffled · 技术社区 · 9 年前

我正在建立我的第一个 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应该如何处理它们?

1 回复 | 直到 9 年前

kraf 9 年前

我已经使用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/