Redux Live Class

Day 1

Josh David Miller

product strategist, speaker, advisor, entrepreneur

@joshdmiller

joshdavidmiller.com

Tutorials teach you how to write code

But not how to engineer

What's in an App?

<Navbar />
<Album />
<Player />
<App>
</App>
<Cover />
<Header />
<TrackList />
<Album>
</Album>
<Header />
<Track />
...
<TrackList>
</TrackList>

Everything is a Component

React Principle # 1

From Where Does THE DATA Come?

<Navbar />
<Album>
<Player />
<App>
</App>
</Album>
<Cover />
<Header />
<Header />
<Track />
...
<TrackList>
</TrackList>
...

Data Flows DowN Stream

React Principle # 2

But Wait a Minute...

<Navbar />
<Album>
<Player />
<App>
</App>
</Album>
<Cover />
<Header />
<Header />
<Track />
...
<TrackList>
</TrackList>
...

Why Are we Having a Problem?

We're trying to play a song from the Track component.

We're trying to mutate state from the Track component.

or

What if we JUST Signalled

THAT IT HAPPENED

instead?

<Navbar />
<Album>
<Player />
<App>
</App>
</Album>
<Cover />
<Header />
<Header />
<Track />
...
<TrackList>
</TrackList>
...

onClick

onTrackClick

onTrackClick

create a new state

...

Events Bubble UP Stream

React Principle # 3

( state ) => ui
∴

IF

# 1: Everything is a Component

# 2: Data Flows Downstream

# 3: Events Bubble UpStream

THEN

Immutability

IDEMPOTENCY

SIMPLICITY

Testability

Reusability

COMPOSABILITY

TL;DR 

( state ) => ui

Data Flow

<Navbar />
<Album>
<Player />
<App>
</App>
</Album>
<Cover />
<Header />
<Header />
<Track />
...
<TrackList>
</TrackList>
...

Our Example Tree Is Trivial

Traditional MVC

Troubleshooting Sucks

MVC is not Scalable

Immutability

IDEMPOTENCY

SIMPLICITY

Testability

Reusability

COMPOSABILITY

Data Flow Goals

React Overview

React is a JavaScript library for rendering UI based on state.

React is not a framework

Just the Views, Ma'am

forget

{

models

controllers

observers

scopes

templates

2-way data binding

dependency injection

ui  =   f ( state )

Typical React Example

const Header = React.createClass({
  render () {
    return (
      <div>
        <h1>Hello, world!</h1>
      </div>
    );
  },
});

ReactDOM.render( <Header />, document.getElementById( 'app' ) );

React

is JavaScript

Track Component

const Track = ({
  id,
  idx,
  title,
  artist,
  duration,

  onClick,
}) => (
  <div className='track' onClick={e => onClick( id )}>
    <span>{ idx }</span>
    <span>{ title }</span>
    <span>{ artist }</span>
    <span>{ duration }</span>
  </div>
);
const Track = ( state ) => ui;
const Track = ( state ) => (

  <div className='track' onClick={e => onClick( id )}>
    <span>{ idx }</span>
    <span>{ title }</span>
    <span>{ artist }</span>
    <span>{ duration }</span>
  </div>

);
const Track = ({
  id,
  idx,
  title,
  artist,
  duration,

  onClick,
}) => ui;
const Track = ({
  id,
  idx,
  title,
  artist,
  duration,

  onClick,
}) => (
  <div className='track' onClick={e => onClick( id )}>
    <span>{ idx }</span>
    <span>{ title }</span>
    <span>{ artist }</span>
    <span>{ duration }</span>
  </div>
);

HTML

<html>

  <head>
    <title>Reacstasy Example</title>
  </head>

  <body>
    <div id="app" />
  </body>

</html>

Rendering

import React from 'react';
import ReactDOM from 'react-dom';
import Track from 'components/track';

function log ( id ) {
  console.log( `You clicked on track ${id}.` );
}

ReactDOM.render(
  <Track
    id='123'
    idx='0'
    title='Hello, Dolly'
    artist='Louis Armstrong'
    onClick={log}
  />, document.getElementById( 'app' )
);

Flux

Flux is a UI architecture with a uni-directional data flow.

asks for data, listens for changes

updates if necessary, tells listeners data changed

gets action requests, dispatches to stores

a description of an event

Many Stores

providing data to

Many Views

dispatching

Many Actions

connected through

One Dispatcher

What is Redux?

Redux is a predictable state container for JavaScript apps.

Redux is A Simpler FLux

App State Is a Single Immutable POJO

REDUX Principle # 1

{

App State Example

}
currentAlbum: { ... },
playlist: [ ... ],
currentTrack: { ... },
user: {
email: 'josh@joshdmillercom',
preferences: { ... },
},

The VIEW Asks for The Data IT NeedS

REDUX Principle # 2

( state ) =>
({
});
repeat: state.user.preferences.repeat,
track: state.currentTrack,

Player Component Data

Components CAN Fire Actions

REDUX Principle # 3

{
}
type: 'PLAY_TRACK',

track: 1234,

Play a Track Action

Actions are HanDLED By Functions

REDUX Principle # 4

( state, action ) => {
};
switch ( action.type ) {
}

Playlist Reducer FN

case 'PLAY_TRACK':
return {
  ...state,
  currentTrack: action.track,
};
default:
return state;
case 'SKIP_TRACK':
return {
  ...state,
  currentTrack: /* ... */,
};
// ...

State is the Result of A ReducE

REDUX Principle # 5

current State

Handler 1

Handler 2

New State

ReducE Pseudocode

function dispatch ( action ) {
  this.state = functions.reduce( function ( state, fn ) {
    return fn( state, action );
  }, this.state );

  this.listeners.forEach( fn => fn() );
}

asks for the data it needs

description of what happened

immutable POJO

reduce a new state

Immutability

IDEMPOTENCY

SIMPLICITY

Testability

Reusability

COMPOSABILITY

Data Flow Goals

React Big Ideas:

Everything is a Component

( state ) => ui

State is Immutable

Data Flows Down

Events Bubble Up

( state, action ) => state

 

Questions?

React Live Class Intro

By Josh David Miller

React Live Class Intro

An overview of data flow with React and Redux. Part of the introductory lesson to a React/Redux Live class: https://www.codementor.io/classes/learn-reactjs-and-redux-live

  • 991

More from Josh David Miller