Skip to content

Instantly share code, notes, and snippets.

@khankuan
Created July 16, 2015 04:44
Show Gist options
  • Save khankuan/db4e05a24b7becc9d512 to your computer and use it in GitHub Desktop.
Save khankuan/db4e05a24b7becc9d512 to your computer and use it in GitHub Desktop.
Understanding Flux
1) Stores
- Stores can be specific to a domain (ProductStore, ShoppingCartStore)
- Stores can be specific to a view (esp pages, like PopularProductPageStore)
- Emit events, in 99% of the time only 'change' events, in special very rare case we need to use other event types.
- Contains a single immutable map/single object as its data
- Should only be concerned on storage kind of logic (meaning no API calls here)
2) Views (Components)
- Contains no application state
- Should only contain transient states (states that can be lost, like if you the tab's position or don't need to programatically change the tab position, then view can store the tab position instead of having it in the stores)
- Listens to store, typically copy entire store data into its state
- Can be top level app components (like headerbar, sidebar or pages) or app reusable components like a form or a '+1' button
3) Dispatcher
- Single dispatcher that handles all app actions
4) Actions
- An object containing information to an action
- Can be classified into types, like view actions or server action etc
- Dispatched to dispatcher
5) Actions Creators
- Functions that generate actions
- Can create multiple actions
- API calls should create multiple actions (for pending, success/error)
- Can be chained or stacked by returning promises
- Actions can be chained so that each action in the chain does only 1 task (e.g, FetchPopularProducts calls another action `QueryProducts`. QueryProducts is responsible to synchronise data per product object. FetchPopularProducts is responsible for the actual list that is popular, and it may store just product ids.)
- If multiple Views (or instances) uses the same action, an additional parameter 'tag' can be added to differentiate the source of the action if required
6) Constants
- Bunch of action types constants
- Can be neater by automatically adding SUCCESS/ERROR/PROGRESS sub action types
- Some libraries may not need Constants as they are wrapped by the library already
7) UI kit
- UI kit that contains ui components/widgets
- Can include layouts such as LinearLayout, TableLayout etc
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment