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?
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:
PENDING
action and a request type, eg return { actionType: 'API_PENDING', type: 'stock-prize' }
RESPONSE
type action or an ERROR
, both enriched with the type of the request, eg 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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.