Fluxxor is a set of tools to facilitate building JavaScript data layers using the Flux architecture by reifying many of the core Flux concepts. It works particularly well in conjunction with React as the view layer, and contains a few helpers to make integration with React applications easier. Flux is an architecture for creating data layers in JavaScript applications. It was designed at Facebook along with the React view library. It places a focus on creating explicit and understandable update paths for your application's data, which makes tracing changes during development simpler and makes bugs easier to track down and fix.

1. A New Way to Build Awesome Javascript Applications
Karthick Kumar V
UI/UX Developer
Atomic IT Solutions
Twitter : @karthickvkumar
Email : karthickvelraj@live.in
+ =

2. React an OverviewReact an Overview
● React is a JavaScript library for creating user interfaces by Facebook
and Instagram
● It is all about building reusable components
● It creates its own virtual DOM where your components actually live.
This approach gives you enormous flexibility and amazing gains in
performance
● It uses a special syntax called JSX, which allows you to mix HTML
with JavaScripts

3. What is Flux?What is Flux?
● Flux is the application architecture that Facebook uses for building
client-side web applications
● Flux applications have three major parts: dispatcher, stores, views
● It is used for creating data layers in JavaScript applications

4. Facts on FluxFacts on Flux
● Flux is not a framework. You can’t download it
● Flux was designed by Facebook to work with React
● Flux’s uni-directional dataflow
● You can download lot’s of libraries to implement Flux such as
1.Fluxxor
2.marty.js
3.Reflux

5. Flux an OverviewFlux an Overview
● To best describe flux, we will compare it to one of the leading client-
side architectures: MVC
● As an MVC application the dependencies become more complex

6. Flux an OverviewFlux an Overview

7. Flux an OverviewFlux an Overview
● Flow of Flux
● The flow doesn't change significantly for additional stores or views

8. Flux an OverviewFlux an Overview

9. What is Fluxxor?What is Fluxxor?
● Fluxxor is a set of tools to facilitate building JavaScript data layers
using the Flux architecture by reifying many of the core Flux concepts
● It works particularly well in conjunction with React as the view layer
● It contains a few helpers to make integration with React applications
easier
● Fluxxor prevents cascading updates where one action triggers another

10. How to use with React?How to use with React?
● CommonJS: Its is distributed on npm
npm install [--save] fluxxor
● Standalone : We can include in our script
<script src="path/to/fluxxor.js"></script>
● Third-Party Releases : WebJar
"org.webjars" % "fluxxor" % fluxxorVersion

11. Fluxxor an OverviewFluxxor an Overview
● Fluxxor consists of three core pieces:
1. Fluxxor.Flux
2. Stores
3. Actions
● Fluxxor ships with some mixins to make it easier to use in conjunction
with React
1. Fluxxor.FluxMixin 2.Fluxxor.StoreWatchMixin

12. Fluxxor.Flux OverviewFluxxor.Flux Overview
● Fluxxor.Flux is the main container object for a Flux application
● It provides access to the stores and the actions
● It is responsible for managing the dispatcher internally
● We can creates a new Flux instance
new Fluxxor.Flux(stores, actions)
● stores - An object map of store names to store instances
● actions - An object map of action names to action functions

13. Fluxxor.Flux FunctionsFluxxor.Flux Functions
● Fluxxor.Flux#store(name) - Retrieves a store by its name
● Fluxxor.Flux#getAllStores() - Retrieves all stores
● Fluxxor.Flux#actions - Retrieves the map of actions
● Fluxxor.Flux#addStore(name, store) - Adds a new store to the Flux
instance
● Fluxxor.Flux#addStores(stores) - Adds stores to the Flux instance
● Fluxxor.Flux#addActions(actions) - Adds actions to the Flux instance

14. Stores an OverviewStores an Overview
● The stores are responsible for managing business logic and data
● They're same as models or collections in MVC systems, but stores may
manage more than a single piece of data
● The only way to update stores is to send them an action by way of the
dispatcher
● It does not have methods or properties that allow users to manipulate
the store directly

15. Store FunctionsStore Functions
● Fluxxor.createStore(spec) - Create a new store constructor
spec: An object describing the stores
● Store#waitFor(stores, callback) - Waits for other stores to finish
dispatching the current action, executing callback afterwards
● EventEmitter methods - Stores are instances of EventEmitters, and thus
inherit all the EventEmitter methods

16. Actions an OverviewActions an Overview
● Actions are simply combinations of a string type and an object payload
● It represent the intent to perform some manipulation of the data in a
Flux application
● The only way to update stores is to send them actions

17. How Actions works?How Actions works?
● Flux constructor takes an object with function values
● These functions can call this.dispatch(type, payload) to dispatch an
action to the dispatcher

18. Fluxxor.FluxMixin an OverviewFluxxor.FluxMixin an Overview
● It is a simple React mixin that provides a Flux instance available to a
component hierarchy
● FluxMixin in to a top level component, and mix in FluxMixin to any
child components
● Flux object will be available as this.getFlux() in any component using
the mixin

19. Fluxxor.StoreWatchMixinFluxxor.StoreWatchMixin
● It is a simple React mixin that will be watching for "change" events on
one or more stores
● Bind to "change" events for each store when the component mounts
● Unbind from "change" events when the component unmounts
● Automatically call setState with the return value of getStateFromFlux
when a store emits a "change" event