Redux JavaScript Meetup - Talentica, Saturday, July 6, 2019

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Redux
Beginner to advanced

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Why Redux
itemList: [ ]
Component-2
Component-1
Component-3
Display
Component
Parent Component
Child Components

Why Redux
itemList: [ ]
Component-2
Component-1
Component-3
Display
Component
{id: 1}
Parent Component State
Child Components

Why Redux
itemList: [ {id: 1} ]
Component-2
Component-1
Component-3
Display
Component
Parent Component State

Why Redux
itemList: [ {id: 1} ]
Component-2
Component-1
Component-3
Display
Component
{id: 2}

Why Redux
itemList: [ {id: 1} , {id: 2} ]
Component-2
Component-1
Component-3
Display
Component

Why Redux
Component-2
Component-1
Component-3
Display
Component
{id: 1}
{uid: 3}
{id: 2},itemList: [ {id: 1} , {id: 2} ]

Why Redux
itemList: [ {id: 1} , {id: 2} , { uid: 3} ]
Component-2
Component-1
Component-3
Display
Component

Why Redux
Component-2
Component-1
Component-3
Display
Component
{id: 1} {id: 2} , { uid: 3}itemList: [ {id: 1} , {id: 2} , { uid: 3} ]

Why Redux
Component-2
Component-1
Component-3
Display
Component
itemList: [ {id: 1} , {id: 2} , { uid: 3} ]

Problems
• Hard to identify component with wrong logic.
• Need rework to see intermediate state of app.
• What if 100s of component updating same complex data.
• Passing data through long chain of nested components.
• Problems due to data mutation takes hours to debug and
then finally you realize the issue and you are like ….

Redux
Component-2
Component-1
Component-3
Display
Component
Store

Store
• Store is nothing but simple
javaScript object which
holds application
state/data.
Store State

• What is store state.
• Single instance of store will be used throughout
application.

Redux
Component-2
Component-1
Component-3
Display
Component
Store Action1

Action

Redux
Component-2
Component-1
Component-3
Display
Component
Store's
state-1 Action1
Store's state1
Action1

Redux
Component-2
Component-1
Component-3
Display
Component
Store
state-1 Action2
Store's state1
Action1

Redux
Component-2
Component-1
Component-3
Display
Component
Store's
state-2 Action2
Store's state1
Action1
Store's state2
Action2

Redux
Component-2
Component-1
Component-3
Display
Component
Store's
state-2 Action3
Store's state1
Action1
Store's state2
Action2

Redux
Component-2
Component-1
Component-3
Display
Component
Store's
state-3 Action3
Store's state1
Action1
Store's state2
Action2
Store's state3
Action3

Reducer
• Reducer is just a function
which understands action
that components raise or
dispatches.
• It is responsible for taking
out payload/data from
action and appropriately
storing it in redux store.
• You will write actions as
well as reducer
24

Redux data
flow
25
Credits: Medium.com

Demo ...
Vanilla Redux

Any Questions

You might not need redux ...

React Redux
• Connect api helps application to connect with redux
store.
• It creates wrapper component around our component
• It avoids some grunt work
– like subscribing to store in each component.
– Import store and passing dispatch to every component
– Optimization to avoid unnecessary re-renders when store
changes.

Demo ...
React Redux

Connect api code

Cross Slice Reducer …

Multiple stores

Normalized Store

Chrome Plugin
Demo ...

Replace Reducer

Hot reloading for faster
development

Preloaded state

Most Important, Interesting and
Easy part of Redux.

Middleware
Credits: tenor.com

Let's see how middleware works.
Syntax is available on docs as well.

Component dispatches
action
Middleware 1 Middleware 2 Middleware 3
Reducer
Action
Action Action
Action

Demo ...

Thunk Middleware

Redux JavaScript Meetup - Talentica, Saturday, July 6, 2019

Recommandé

Recommandé

Contenu connexe

Similaire à Redux JavaScript Meetup - Talentica, Saturday, July 6, 2019

Similaire à Redux JavaScript Meetup - Talentica, Saturday, July 6, 2019 (20)

Dernier

Dernier (20)

Redux JavaScript Meetup - Talentica, Saturday, July 6, 2019