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

Posted 2023-02-22

【中文标题】如何在 React.js Flux 架构和 McFly 中使用操作处理 API 调用？

【英文标题】：How do I handle API calls with actions in the React.js Flux architecture and McFly?

【发布时间】：2015-05-10 15:10:07

【问题描述】：

我正在构建我的第一个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】：

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