Flux & ReduxMorgan Cheng

2006 2010 2013 2015

Problem

More Problem

So, Flux is THE ONE?

“React + Flux can do in just 137 lines what jQuery can do in 10!”

“What about thousands of lines of code”

“React + Flux can do in just 137 lines what jQuery can do in 10!”

“What about thousands of lines of code”

Predictable

UI = f(state)

UI = f(state)

Uni-Direction Data Flow

Game Time: Let’s Play Flux

Drawbacks of Flux• Inter-dependency among multiple stores

• Hard to support Server Side Rendering

• Hard to do hot-reloading

Flux is just an idea

So Many Weapons

Redux is Flux

Redux = Reducers + Flux

Reducer

(accumulation, input) => new_accumulation

(state, action) => new_state

What If I Told YouThe State is Immutable

Three Principles of Redux• Single Source of Truth

• State is read-only

• Changes are made with pure functions

Game Time: Let’s Play Redux

Encapsulation

Component

View

Reducer

Actions

JavaScript

SCSS/CSS

Images

Code Demo Time

Convention is NOT enoughConstraint Matters！

What’s your role?

ThanksAny Questions?