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

Question

I am building my first React.js Flux example, I am using McFly. You type a ticker symbol into an input box(I've been using 'F' & 'K' because of issues with debouncing), then I use a mini-api to get the stock's info and then display the price. The code works, but I'm not sure I am doing it properly. When any text is typed into the input box, I fire a updateInputValue action, but at the same time I send a call to the API. When the API returns it fires a updateStockPrice action with the returned data.

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/

Is this how API calls are meant to handled in Flux? In particular is this how they are supposed to be handled with McFly?

score 2 · Accepted Answer · answered Mar 09 '15 at 18:05

I've been using McFly for several months now and I haven't seen any recommendations for this specific to McFly. I do my API calls in a similar fashion but with a higher level of abstraction:

An action creating a request would return a PENDING action and a request type, e.g. return { actionType: 'API_PENDING', type: 'stock-prize' }
The action created in the response callback would return either a RESPONSE type action or an ERROR, both enriched with the type of the request, e.g. return { actionType: 'API_RESPONSE', type: 'stock-prize', body: res.body }

The stores then figure out what to do based on the type. It allows you to hide a lot of boilerplate in helpers.

There is a good article about the pattern: http://www.code-experience.com/async-requests-with-react-js-and-flux-revisited/

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

1 Answers1