Custom HTML Element
View
Properties
Internal State
<LikeBtn nbLike="36" />
// isLiked = false
<LikeBtn nbLike="37" />
// isLiked = True
C
C
C
C
C
C
C
C
C
State
State
State
State
State
State
State
State
State
To the rescue
The original one
Applied to Angular
Single source of truth
The state of your whole application is stored in an object tree within a single store.
Single source of truth
C
C
C
C
C
C
C
C
C
State
State
State
State
State
State
State
State
State
Single source of truth
C
C
C
C
C
C
C
C
C
State
Store
State is read-only
You have to dispatch action to change the state
State is read only
State
Store
Components
Action
Changes are made with pure function
Reducer must not modify their arguments
Changes are made with pure function
State
Store
Components
Action
Reducer
new State
Focus on a particular component
State
Store
Container (HOC)
Action
Reducer
new State
View
(stateless Component)
Props