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

MVC Issue 1

  • 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!

MVC Issue 2

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) Flux Arch

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