javascript - 如何使用 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 }

商店然后根据类型确定要做什么。它允许您在助手中 Conceal 大量样板。

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