What the flux??

(flux and redux)

Flux, Redux

• functional programming

• Flux architecture

• Redux

Functional Programming

• No side effects

  • takes an input and returns a value (pure functions)
  • No side effects, or outside manipulations
  • if given the same input it will always return the same value
  • STATELESS!

• Easy to unit test

stateless

    function countUsers(users) {
        return users.length
      }

stateless

  function countDeactivatedUsers(allUsers, activeUsers) {
    return allUsers.length - activeUsers.length
  }

composability!

  function countUsers(users) {
    return users.length
  }

  function countDeactivatedUsers(allUsers, activeUsers) {
    return countUsers(allUsers) - activeUsers.length
  }

Not Stateless

  /* Both these functions become statefull */
  function countDeactivatedUsers(allUsers, activeUsers) {
    return countUsers(allUsers) - activeUsers.length
  }

  function countUsers(users) {
    users = localStorage.users
    return users.length
  }

Not Stateless

  function countDeactivatedUsers(allUsers, activeUsers) {
    return countUsers(allUsers) - activeUsers.length
  }

  function countUsers(users) {
    /* MUTATION!!! Whatta jerk!! */
    users.pop()

    /* cover up */
    return users.length + 1
  }

Not Stateless

  var extras = []

  function countDeactivatedUsers(allUsers, activeUsers) {
    return countUsers(allUsers) - activeUsers.length - extras.length;
  }

Not Stateless but appears it.

  function countDeactivatedUsers(allUsers, activeUsers) {
    localStorage.users = allUsers;
    return countUsers(allUsers) - activeUsers.length;
  }

Flux Architecture - The Problem

• The underlying problem is how data flows through applications
  • the most basic dynamic applications consist of models which hold data, and are responsible for passing data to views

• As applications and user actions start to get more complex, views need to update models, and sometimes models need to update models.. and asynchronously at that!

The Solution - Unidirectional dataflow

Facebook decided to try a new architecture where data flows in one direction, and one direction only (make clever one direction boy band joke)

Things that make up flux architecture

• Store
• View
• Actions
• Dispatcher

What the term??

Action

• Action: an object literal that describes what happened in the view
  • Example: {type: 'ADD_TASK', task: 'buy salami'}

Store

• Store: Holds all the application state and state changing logic
  • Over-controlling bureaucrat
  • All state changes must be made by the store personally
  • You can't request it to change state (no setters)
  • To request a state change, you must follow the proper procedures (you must submit an action via the dispatcher)

Dispatcher

• Dispatcher: basically a big registry of callbacks (Store methods)
  • Acts as the operator between the store(s) and action
  • Kind of like the peanut/beer guy at sporting events
    • takes an action, then goes to all the stores and ask who wants the action

Links

Facebook's flux page

Redux documentation

NgRedux

Flux Counter Example

Redux Counter Example