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