klaoha06/Kronos — pull request #32 by franjohn21 (2014-12-17 08:34:58+00:00)
Title: I added flux. For now only the Subscribed Groups are loaded via Flux

In essence, flux is just a more complicated way to load data from your server. However this is probably necessary because it will allow us to make the Kronos codebase scaleable as it will make it clear what is happening and how.

So here's the structure of Flux:
![flux-diagram](https://cloud.githubusercontent.com/assets/7452924/5468330/14414bf8-8582-11e4-80e7-da333cd2ca67.png)

I setup subscribed groups such that they will use Flux to pull and remain in sync with our database. Here's how our file structure looks now:

```
---js
|---actions
|---GroupActions.js
|---constants
|---GroupConstants.js
|---dispatcher
|---GroupDispatcher.js
|---react_components
|---stores
|---GroupStores.js
|---utils
|---GroupWebAPIUtils.js
```
And I can walk you through how it works.
**We start off in _sidebar.jsx.** All the user's subscribed groups are loaded from the server via AJAX in getInitialState at the line GroupAPI.retrieveSubscribedGroups().
**In GroupWebAPIUtils** we can see this AJAX call and then on return it calls GroupActions.loadAllGroups. **GroupActions** then lets our dispatcher know that something has changed, and it calls GroupDispatcher with the action that has changed and the data.
**GroupDispatcher** lets us distinguish between view or server actions. In this case its a server action, so we run the method and dispatch the data.
**Now, if we look in our GroupStore file** (toward the button) you can see we registered the store with the dispatcher and that is the method that gets called. In this case the action told the dispatcher that we want to 'RECEIVE_RAW_GROUPS', the dispatcher told the Store that this was the action, and in the Store we can say how to handle this. As we have setup, the Store will call the function _addGroups, and then it will emit the change. _addGroups adds the raw group data to a javascript object that represents our store, _subscribedGroups. Emit change lets it be known that something has happened.
**So then if we dive back into _sidebar.jsx** we can see that in componentDidMount we added an event listener which will check if something has changed (via the library event-emitters). Because we set that up, the react component SubscribedGroups knows that the GroupStore was updated and calls getStateFromStores to update. **This completes the loop.**