Redux

Predictable State Container

more on that in just a sec

Runs Everywhere

JavaScript does (browser, server, native)

View Library Agnostic

though often found with React

Excellent Docs & Videos

I'm totally plagiarizing rn

Packs a Punch

at ~ 2kB

Predictable

State

Container

Not a Database

SELECT * FROM `player`
WHERE `name` LIKE 'Jared A%'

Not Server Session "State"

HTTP/1.0 200 OK
Set-Cookie: LSID=DQAAAK…Eaem_vYg; Path=/accounts; Expires=Wed, 13 Jan 2021 22:23:01 GMT; Secure; HttpOnly
Set-Cookie: HSID=AYQEVn….DKrdst; Domain=.foo.com; Path=/; Expires=Wed, 13 Jan 2021 22:23:01 GMT; HttpOnly
Set-Cookie: SSID=Ap4P….GTEq; Domain=foo.com; Path=/; Expires=Wed, 13 Jan 2021 22:23:01 GMT; Secure; HttpOnly

Not Component Internal State

like :hover or :active state

What Then?

Application State

• in memory data assignment (eg: var, let, const)
• that has app significance
• is referenced asynchronously
• and may change asynchronously

Application State

not app state

• drop-down is open
• what's being hovered over

is app state

• list of options
• chosen option

example

Application State

may consist of:

• transformed server responses
• cached data
• locally created data
• complex UI state
  • active route
  • the active tab
  • whether to show a spinner
  • whether to show pagination
  • alert messages / notifications

Predictable

State Container

If a model can update another model, then a view can update a model, which updates another model, and this, in turn, might cause another view to update. At some point, you no longer understand what happens in your app as you have lost control over the when, why, and how of its state. When a system is opaque and non-deterministic, it’s hard to reproduce bugs or add new features.

Managing State is Hard

http://redux.js.org/docs/introduction/Motivation.html

Opaque?

Non-deterministic?

add asynchronous behavior

How is Redux Different?

Same Input Produces Same Output

Any Potential State Change is Clearly Declared Beforehand

Predictable State Container

We've Demonstrated some of the Complexities of State Management

So Obviously the Smart Thing to do is Let State Run Freely and Loose

When application state is decentralized and spread across your entire app - often hidden with behaviors, in functions, in closures, and/or bunch of global objects - it becomes even more impossible to manage as your app scales

Uncontained App State

class ScoreCard {

    constructor(name, initialScore=0) {
        this.name = name;
        this.score = initialScore;
    }

    add(number) {
        this.score += number;
    }
}

In Redux, your whole app state is stored separately -- contained in an object tree inside a single store.

There is one way in

There is one way out

Predictability

Clarity

Manageability

Sanity

3 Principles

of Redux

http://redux.js.org/docs/introduction/ThreePrinciples.html

Single Source of Truth

The state of your whole application is stored in an object tree within a single store.

State is Read-Only

The only way to mutate the state is to emit an action, an object describing what happened.

Changes via Pure Functions

emitted actions (along with the current state) are passed to pure functions which return a new state

Super Simple API

Redux has a

Super Simple API

Reducers

Reducers

• a regular JavaScript Function
• that's a pure function
• accepts previous state and action
• returns a new state
• returns the previous state for any unknown action.

Reducers

Things you should never do inside a reducer:

• Mutate its arguments
• Perform side effects
  • API calls
  • routing transitions
• Call non-pure functions
  • Date.now()
  • Math.random().

Given the same arguments, it should

calculate the next state and return it.

No surprises. No side effects. No API calls. No mutations.

Just a calculation

Example Reducer

export default (state = 0, {type}) => {
    switch(type) {
        case 'INCREMENT':
            return state + 1;
	  
        case 'DECREMENT': 
            return state - 1;
	  
        default:
            return state;
  
    }
}

Did we:

• mutate any args?
• perform side effects?
• call non-pure functions?
• return a new state?

Redux Visualized

redux internal state tree

(state,action)
 => newState

reducer

Live Coding

https://jsbin.com/pipiya/2/edit?js

import {createStore} from 'redux';

const myReducer = (state = 0, {type}) => {
  switch(type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

const store = createStore(myReducer);

store.subscribe( () => 
  console.log(store.getState())
);

store.dispatch({type: "INCREMENT"});
store.dispatch({type: "DECREMENT"});

Answer

Actions & Action Creators

Actions

• payloads of information that send data from your application to your store
• are POJOs
• must have a unique type property
• may be accompanied by minimal data

Action Creators

• functions that create actions
• abstract store from app

Live Coding

RoadTrip Dad

start 0...

https://jsbin.com/bakehoh/6/edit?js,output

/* Task #1 */
const roadTripDad = 
   (state = 0, {type, number}) => {
    switch(type) {
	case 'START':
            return number;
	case 'ADD':
	    return state + number;
	case 'SUBTRACT':
	    return state - number;
	case 'MULTIPLY':
	    return state * number;
	case 'DIVIDE':
	    return state / number;
	default:
	    return state;
    }
}
  
/* Task #2 */
const start = number =>
  ({type: 'START', number});

const add = number =>
  ({type: 'ADD', number});

const subtract = number =>
  ({type: 'SUBTRACT', number});

const multiply = number =>
  ({type: 'MULTIPLY', number});

const divide = number =>
  ({type: 'DIVIDE', number});

/* Task #3 */
const store = createStore(roadTripDad);
store.subscribe(() => {
    render(
	store.getState(),
	number =>
            store.dispatch(add(number)),
	number =>
            store.dispatch(subtract(number)),
	number =>
            store.dispatch(multiply(number)),
	number =>
            store.dispatch(divide(number))
    )
});


/* Task #4 */
store.dispatch(start(10))

Combine Reducers

So, the entire app's state is contained in one reducer?

No

Redux Shines at Scale

Combine Reducers

Visualized

Combine Reducers

redux internal state tree

(state,action)
 => newState

(state,action)
 => newState

reducer

reducer

Async Behavior

things you should never do inside a reducer

API Calls

Doing So Makes them Non-Deterministic, Unpredictable & Opaque

Where is Async Managed?

...

https://jsbin.com/wuweji/2/edit?js

Live Coding

https://jsbin.com/mazadug/11/edit?js

Answer

Middleware

a third-party extension point between dispatching an action, and the moment it reaches the reducer.

Visualized

Middleware

redux internal state tree

(state,action)
 => newState

middleware

reducer

What Does That Mean?

• you write reducers the exact same way
• you can intercept & act on actions coming in
• you still dispatch regular POJOs
• you can also dispatch in other things
  • thunks
  • promises
  • whatever the middleware supports

What It Looks Like

import { createStore, combineReducers, applyMiddleware } from 'redux';
import reducers from '../path/to/reducers.js';

// middleware that lets you dispatch thunks
import thunk from 'redux-thunk';

const rootReducer = combineReducers(reducers);

export const store = createStore(
    rootReducer, 
    applyMiddleware(thunk)
);

Using Redux Thunks

// Meet thunks.
// A thunk is a function that returns a function.
// This is a thunk.

function makeASandwichWithSecretSauce(forPerson) {

  // Invert control!
  // Return a function that accepts `dispatch` so we can dispatch later.
  // Thunk middleware knows how to turn thunk async actions into actions.

  return function (dispatch) {
    return fetchSecretSauce().then(
      sauce => dispatch(makeASandwich(forPerson, sauce)),
      error => dispatch(apologize('The Sandwich Shop', forPerson, error))
    );
  };
}

store.dispatch(
  makeASandwichWithSecretSauce('My wife')
)