Alt Flux Tutorial in Depth – The First CycleTweet
Alt Flux Tutorial – Some Additional Information
I’ve started using Alt as my Flux library recently, and the only reason was that the type definition file (d.ts) for TypeScript was available – until then, I was using Reflux.
Well, as I started using Alt by looking at the tutorial, is was a bit hard for me to understand the unidirectional data flow. So I’ve decided to create a diagram to make it easier to depict what is happening. I’m not going in depth about the code and what is already written in the Getting Started section of the official site and I’m assuming that you have looked at the entire code. If any information in this post seems strange, feel free to leave some comments. It would extremely help me and whoever else reading this post.
Fetching the Location List
As I tried to write a data flow diagram for this process, I’ve noticed it was hard to write it as a unidirectional data flow because of the LocationSource. Anyway, the simplest diagram would probably look like this.
This diagram does not quite illustrate how the code is written. The
Locations React component calls
fetchLocation when the
fetchLocations method is not
LocationStore‘s method because it was automagically exported by calling
constructor – therefore, being able to call
LocationStore.fetchLocations(). In addition,
fetchLocations method is called when
LocationStore.fetchLocations() is called which is then connected to
fetchLocations. Therefore, I’ve simplified the diagram so that it looks like the react component’s initial
LocationStore.fetchLocations() is calling the
fetchLocations, protecting the Flux’s unidirectional architecture.
First of all the
AllLocations will get mounted and
LocationStore.fetchLocations(); gets executed.
The Action, Dispatcher, Store
As mentioned above, this call actually executes
fetchLocations(). This is because it was hooked (like a
mixin) as explained in the docs inside
fetchLocations makes an asynchronous call to the server (which is stubbed out in the tutorial as a
setTimeout function) and returns a
Promise. It also triggers the
LocationActions.fetchLocations action to notify the
LocationStore that it is going to load the locations.
The diagram in detail would look like this.
LocationStore listens to the
handleFetchLocations gets called – which resets the
this.locations with an empty array.
The View Again
LocationStore‘s state changes, the
AllLocations component receives the new
props through the
AltContainer automagically – see the official documents on what actually happens. The
true because the
Promise hasn’t resolved yet – and by the way,
LocationStore.isLoading method is also automagically exposed via the
exportAsync method – which then makes the
AllLocations JSX end up as a
In a diagram in detail, the components and the store are connected as below.
Hence, the view ends up looking like this.
This is what happens in the first cycle. I’ll explain what happens after the
Promise gets resolved in the next post.