The document presents an introduction to React-Redux, emphasizing the importance of etiquette in sessions, including punctuality and feedback. It covers the architecture of modern web applications, highlighting state management and the benefits of using Redux for centralized data handling. Additionally, it explains how Redux works with React through views, actions, reducers, and selectors, showcasing its advantages like predictability and debuggability.

1. Presented By: Pushpendra Sharma
& Umang Goyal
Introduction to
React-Redux

2. Lack of etiquette and manners is a huge turn off.
Knolx Etiquettes
Punctuality
Respect session timings, you
are requested not to join
sessions after a 5 minutes
threshold post the session
start time.
Feedback
Make sure to submit a
constructive feedback for all
sessions as it is very helpful
for the presenter.
Silent Mode
Keep your mobile devices in
silent mode, feel free to move
out of session in case you need
to attend an urgent call.
Avoid Disturbance
Avoid unwanted chit chat
during the session.

3. Agenda
Anatomy of modern webapp
01
02
03
04
05
How React Redux
Benefits of using Redux
What is State Management
How to Redux works
06 How to use Redux with React ( Demo )

4. Anatomy of Modern Webapp
❖ It a single page application, means should update UI dynamically with the
data fetched from server without re-loading the page
❖ It should be fast and frictionless experience

5. Architecture of modern webapp
❖ Instead of creating pages, components are build first and then are composed in
complex UIs.
❖ Data is passed into those components and it takes care of how to update the UI.
❖ Data is kept out of the component tree so that its not affected by re-renders of UI,
its centralised and consistent.
❖ A state management solution to manage data independent of the UI layer.

6. Architecture of Modern Webapp
user: {
email,
token,
},
transaction: {
data,
page,
},
account: {
isAdmin,
privileges,
}
Component tree
Data

7. What is State Management
It is exactly as it sounds, managing state of the application.
State:
➔ Data fetched from server.
➔ User details, tokens, role.
➔ Details filled in the forms.
➔ etc
Management:
➔ Initializing
➔ Updating
➔ Deleting

8. Why is State Management required
❖ A centralised data state
❖ Consistent data available across applications to all pages and components (
header, table, graphs, menus ).
❖ Data is readily available and updated on the client side instead of requesting
from server each time.

9. Why is State Management required
( login )
( navigate,
view feeds )
( update
details )
( select user
options )
( user details )
( user details )
( transaction,
user details etc )
( user details )
( transaction )
Event
Data

10. Why is State Management required
( login )
( navigate,
view feeds )
( update
details )
( select user
options )
( user details )
( feeds )
( transaction )
( .
.
. )
Event
Data

11. Why is State Management required
( login )
( navigate,
view feeds )
( update
details )
( select user
options )
( user details )
( feeds )
( transaction )
( .
.
. )
Event
Data

12. React
❖ Javascript library
❖ Used to build UI components, especially for a single page application.
Redux
❖ Javascript library
❖ Used for state management in Javascript apps.
❖ Works independently of UI library.
What is React Redux

13. How Redux works
View
Action
Reducer
Store(cent
ral State)
Selector
Redux is a predictable, centralised, debuggable and flexible state container
for JS apps.

14. How Redux works
View
Action
Reducer
Store
Selector
Store is the state object which is maintained by redux. It’s a simple
javascript object.
Button
user: {
email,
token,
},
transaction: {
data,
page,
},
poins: {
score,
history
},
account: {
isAdmin,
privileges,
}
Store ( State Object )

15. How Redux works
View
Action
Reducer
Store
Selector
Action is simple JS object that should a “type” key and can also have a
“payload” key. Passed into a dispatcher function
Button
{
type: ‘ADD_TASK’,
payload: {
name: ‘buy milk’,
done: false,
}
}
Action
dispatcher()
Event

16. How Redux works
View
Action
Reducer
Store
Selector
Reducer is a pure JS function that takes current state and action as
arguments and returns the updated state.
Redux only has one root reducer.
Button
function ({
state, action
}) => {
case: ‘ADD_TASK’
return {
…state,
task: action.payload
}
case: ‘DELETE_TASK’
return {
…state,
task: action.payload
}
}
Reducer

17. How Redux works
View
Action
Reducer
Store
Selector
Selector is a pure JS function that takes current state and returns a slice of
the store object. It re-evaluates its output when store
is updated and view can subscribe to it..
Button
function (state) => {
return state.tasks
}
Selector

18. Benefits of using Redux with React
❖ Predictable flow of data
❖ Centralised data store
❖ Debuggable, due to availability of redux dev-tools
❖ Leaner react components

19. Demo

20. ● https://reactjs.org/docs/getting-started.html
● https://redux.js.org/
References

21. Thank You !
Get in touch with us: