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

Question

我正在构建我的第一个 React.js Flux example, I am using McFly。你在输入框中输入一个股票代码（我一直在使用 'F' & 'K' 因为去抖动问题），然后我使用 mini-api 来获取股票的信息和然后显示价格。该代码有效，但我不确定我是否正确执行。当在输入框中输入任何文本时，我会触发 updateInputValue 操作，但同时我会向 API 发送调用。当 API returns 它使用返回的数据触发 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 调用，但抽象级别更高：

创建请求的操作将 return 一个 PENDING 操作和一个请求类型，例如return { actionType: 'API_PENDING', type: 'stock-prize' }
在响应回调中创建的操作将 return 是 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 调用？

How do I handle API calls with actions in the React.js Flux architecture and McFly?

javascript

api

facebook

reactjs

reactjs-flux