FLUX



Application architecture for building user interfaces



About Flux


  • Introduced by Facebook

  • Client-side architecture for Web Applications

  • Created to resolve problems related to the way data was distributed in the Ui

  • Intended as a solution for state management in React apps

  • Not an implementation - just the Dispatcher

1
 

The Problem





The Problem



The Solution

a unidirectional data flow




The Components


  • Dispatcher

    A central hub that manages the data flow 

  • Actions

    Define an activity to be performed
    Include a payload for the specified action

  • Store(s)

    Contain the application state and logic
    Registers itself with the dispatcher

  • View

    Ui components - React components

Flux libraries


  • Redux

  • Reflux

  • Fluxxor

  • Alt

  • Flux This

  • Fluxy

Redux


  • A single-store object
    immutable

  • Introduces the use of reducers
    nothing magical about it—it’s just a function that takes state and action as arguments and returns the next state of the app

  • Time travel debugging
    trace, log and backtrack changes in the whole app

What's a Reducer

  • Array.prototype.reduce()
  • accumulates the returned values, starting with an initial value


What's a Reducer

  • Returns a new state



What's a Reducer


  • It's a pure function

  • Does not mutate state, it returns a new one

  • Does not call other API or make other side-effects

  • Returns the previous state if no action is known
 

What's next

life after Redux



Some Links



 
 
 
 
 


Thank You




 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Made with Slides.com