React and Redux are latest evolution in modern web application development. This talk covers the concepts and set of technologies of modern web application development.
2. About Me
• Software architect and a full stack web
developer
• Over 12 years experience building
large, highly scalable and reliable web
applications for companies like
Yahoo!, Apple, Netflix, and Walmart
• Co-author of the O'Reilly Media book
entitled "Building Isomorphic
JavaScript Apps” and an upcoming
video series: “Universal JavaScript
with React, Node, and Redux”.
Publications
Sr. Software Architect
Walmart Global eCommerce
September 2016
August 2017
12. The Problem of Modern Web Applications
As an application grows it becomes harder to determine the overall state of the
application and cumbersome to understand where updates are coming from.
13. The Anatomy of a Client Application
Data View
Web App
Events
• Data: Server Data and Input
• Display: A visual representation of the
data
• Event Handlers: User interactions
14. The Anatomy of a Client Application
Redux View
Web App
Events
• Data: Server Data and Input
• Display: A visual representation of the
data
• Event Handlers: User interactions
15. The Anatomy of a Client Application
Redux React
Web App
Events
• Data: Server Data and Input
• Display: A visual representation of the
data
• Event Handlers: User interactions
17. Redux -
Basic Flow
• Uni-directional data flow
• Immutable single store
• Action object describing
what happened.
• All state updates are
performed by pure
functions
ref: http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/9
(state, action) => state
18. Redux -
Basic Flow
• An action is dispatched
(often in response to user
interaction).
• The root reducer function is
called with the current state
and the dispatched action.
• It then returns the new
state.
• React app retrieves the
updated state and re-renders
(state, action) => state
Action
Event
19. Redux -
Basic Flow
• An action is dispatched
(often in response to user
interaction).
• The root reducer function is
called with the current state
and the dispatched action.
• It then returns the new
state.
• React app retrieves the
updated state and re-renders
(state, action) => state
State
Action
20. Redux -
Basic Flow
• An action is dispatched
(often in response to user
interaction).
• The root reducer function is
called with the current state
and the dispatched action.
• It then returns the new
state.
• View retrieves the updated
state and re-renders
(state, action) => state
State
25. Redux -
Async Flow
• Action creator can
have logic for
communicating with
backend APIs
• Middleware provides
third-party extension
point that can be
added to redux
Redux Side Effects
27. Redux -
Async Flow
• An event in the UI
causes and action
created to be invoked
28. Redux -
Async Flow
• An event in the UI
causes and action
created to be invoked
• A function is returned
by the action creator
29. Redux -
Async Flow
• An event in the UI
causes and action
created to be invoked
• A function is returned
by the action creator
• Middleware calls the
function
30. Redux -
Async Flow
• Dispatches a “Request
Started” action and
calls the API.
31. Redux -
Async Flow
• Dispatches a “Request
Started” action and
calls the API.
• Once a response is
returned from the API
call.
32. Redux -
Async Flow
• Dispatch a “Request
Started” action and
call the API
• A response is returned
from the API call
• Dispatch a “Request
Succeeded” action
33. Redux -
Async Flow
• Dispatch a “Request
Started” action and
call the API
• A response is returned
from the API call
• Dispatch a “Request
Succeeded” action
35. Redux -
Async Flow
• Dispatch a “Request
Started” action and
call the API
• A response is returned
from the API call
• Dispatch a “Request
Succeeded” action
36. Redux -
Async Flow
• Dispatch a “Request
Started” action and
call the API
• A response is returned
from the API call
• Dispatch a “Request
Succeeded” action
39. Web Browser
Rendering
Engine
(HTML, CSS)
Scripting Engine
Browser
APIs
(Document,
Window,
Navigator)
React.js
Components
Data
Virtual DOM
minimal set of
real DOM
mutations
52. Redux -
Basic Flow
• Uni-directional data flow
• Immutable single store
• Action object describing
what happened.
• All state updates are
performed by pure
functions
store.dispatch()
store.subscribe(…)
53. Container/Presentational Components
Presentational Components Container Components
Purpose How things look
(markup, styles)
How things work
(data fetching, state updates)
Aware of Redux No Yes
To read data Read data from props Subscribe to Redux state
To change data Invoke callbacks from props Dispatch Redux actions
ref: http://redux.js.org/docs/basics/UsageWithReact.html