I've built out a basic flux app for my first real world implementation.
Say I have a basic currency conversion app.
When I change the amount, or the currency to/from dropdowns I need to make ajax calls to
- 1) refetch currency info, and
- 2) recalculate the conversion rates.
I have a rate store, and a currencyInfo store.
Here's my biggest hangup:
How do I tell the stores to refetch the data based on the various UI pieces / other store data changing?
These updates should happen in order as well, so
- 1) Update UI state
- 2) fetch Currency Info & update state / UI 3) fetch conversion, make calculation and update state / UI with final numbers.
Options I see:
a) (blech) ViewActionCreator.changeAmount(), changeFromCurrency(), changeToCurrency(), all API.fetchCurrency(), and then API.fetchConversion() and hope the ajax calls come back in the right order or try to figure out waitFor
b) Have the conversionStore and currencyStore listen to changes to the amountStore and then refetch their own data
c) ?
I suggest you check out the waitFor() method in the flux dispatcher. It allows you to specify the order in which stores update in response to actions.
Facebook's chat app has a good example of this, where one store waits for two other stores to finish updating before it updates in response to an action.
https://github.com/facebook/flux/blob/master/examples/flux-chat/js/stores/UnreadThreadStore.js