Scribd
Upload
16 views10 pages

Slides

Uploaded by

fawadkhantemp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views10 pages

Slides

Uploaded by

fawadkhantemp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

What is “Redux”?

A state management system for


cross-component or app-wide
state
What Is Cross-Component / App-Wide State?

Local State Cross-Component State App-Wide State

State that affects the


State that belongs to a State that affects multiple
entire app (most/ all
single component components
components)

E.g. listening to user input


E.g. open/ closed state of E.g. user authentication
in a input field; toggling a
a modal overlay status
”show more” details field

Should be managed Requires “prop chains” / Requires “prop chains” /


component-internal with “prop drilling” “prop drilling”
useState() / useReducer() OR: React Context or Redux
What is “Redux”?

A state management system for cross-component or app-wide state

Don’t we have “React Context” already?


React Context – Potential Disadvantages

Complex Setup / Management Performance

In more complex apps, managing React


Context can lead to deeply nested JSX React Context is not optimized for
code and / or huge “Context Provider” high-frequency state changes
components
React Context – Complex Setup
React Context – Complex Setup
React Context – Performance
Core Redux Concepts

NOT useReducer() è
Reducer Function “Reducer Functions” are a
Forwarded to general concept

Mutates (= changes) Store Data

Central Data (State)


Action
Store

Subscription

Dispatch
Components
The Reducer Function

Same input leads to


Should be a pure function
same output

Inputs: Old State + Dispatched Action

Output: New State Object


The Role Of Immutability

State updates must be done in an immutable way!

Objects and arrays are reference


values in JavaScript

Changes made to an object


property affect ALL places where
the object gets used

New object / array copies (also of nested objects /


arrays) must be created when producing a new state

You might also like