Josh David Miller PRO
startup advisor, speaker, CEO. More than mildly obsessed in seeing founders succeed. I only use my powers for good.
Intro to Redux
Data Flow
Traditional MVC
Troubleshooting Sucks
MVC is not Scalable
Immutability
IDEMPOTENCY
SIMPLICITY
Testability
Reusability
COMPOSABILITY
Data Flow Goals
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
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?
Intro to Redux
By Josh David Miller
