SlideShare a Scribd company logo
@marcolanaro86
9 February 2017 2
9 February 2017 3
9 February 2017 4
9 February 2017 5
9 February 2017 6
9 February 2017 8
9 February 2017 9
9 February 2017 10
9 February 2017 11
9 February 2017 12
Simplify the debugging and on boarding process because
it’s easier to reason about the state.
Simpler to test and Easier to implement difficult features
like pagination because reducer can be nested.
Because of the transactional nature of the actions you
can go back and forward and recreate the state at a
specific point in time.
9 February 2017 13
React/Redux developer tools.
Change reducers on the fly.
See the history of the state.
See the state being recalculated.
9 February 2017 14
No dispatcher.
No store registration.
No tricky async code to debug.
Just 99 lines of code you can read.
9 February 2017 15
9 February 2017 16
9 February 2017 17
Given the same input, will always return the same
output.
Side-effect-less (doesn’t mutate input or external state).
Relies on no external state.
9 February 2017 18
9 February 2017 19
9 February 2017 20
9 February 2017 21
An action / action creator should contains only the
tiny bit of data required for the operation.
9 February 2017 22
9 February 2017 23
They are pure functions
Given the state and the action, they return the
new state.
Should be the single source of truth.
9 February 2017 24
Reducers should never store functions.
In the reducer you should always return a new
object.
If you have nested objects you would need to
nest Object.assign().
9 February 2017 25
Where possible your state should be flat
dictionaries and should contain atomic data
(BCNF).
The store should not implement UI specific logic
so it will be reusable.
9 February 2017 26
9 February 2017 27
9 February 2017 28
9 February 2017 29
9 February 2017 30
9 February 2017 31
9 February 2017 32
9 February 2017 33
9 February 2017 34
9 February 2017 35
9 February 2017 36
9 February 2017 37
9 February 2017 38
9 February 2017 39
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
Are written By hand
Usually generated by React
Redux
9 February 2017 41
9 February 2017 42
redux-thunk, redux-saga, redux-observable, etc...
Action Middleware Reducer
9 February 2017 43
9 February 2017 44
9 February 2017 45

More Related Content

Similar to Redux

The Proliferation of New Database Technologies and Implications for Data Scie...
The Proliferation of New Database Technologies and Implications for Data Scie...The Proliferation of New Database Technologies and Implications for Data Scie...
The Proliferation of New Database Technologies and Implications for Data Scie...
Domino Data Lab
 
MVC6 - NetConf UY 2017
MVC6 -  NetConf UY 2017MVC6 -  NetConf UY 2017
MVC6 - NetConf UY 2017
David Revoledo
 
Big Data with SQL Server
Big Data with SQL ServerBig Data with SQL Server
Big Data with SQL Server
Mark Kromer
 
Serverless Security at LASCON 2017
Serverless Security at LASCON 2017Serverless Security at LASCON 2017
Serverless Security at LASCON 2017
James Wickett
 
Scaling Data Quality @ Netflix
Scaling Data Quality @ NetflixScaling Data Quality @ Netflix
Scaling Data Quality @ Netflix
Michelle Ufford
 
Whoops, The Numbers Are Wrong! Scaling Data Quality @ Netflix
Whoops, The Numbers Are Wrong! Scaling Data Quality @ NetflixWhoops, The Numbers Are Wrong! Scaling Data Quality @ Netflix
Whoops, The Numbers Are Wrong! Scaling Data Quality @ Netflix
DataWorks Summit
 
How To Tweak Angular 2 Performance
How To Tweak Angular 2 PerformanceHow To Tweak Angular 2 Performance
How To Tweak Angular 2 Performance
Oleksandr Tryshchenko
 
Readinggroup xiang 24112016
Readinggroup xiang 24112016Readinggroup xiang 24112016
Readinggroup xiang 24112016
Xiang Zhang
 
Serverless Security: A pragmatic primer for builders and defenders
Serverless Security: A pragmatic primer for builders and defendersServerless Security: A pragmatic primer for builders and defenders
Serverless Security: A pragmatic primer for builders and defenders
James Wickett
 
Bicod2017
Bicod2017Bicod2017
Bicod2017
Rim Moussa
 
BICOD-2017
BICOD-2017BICOD-2017
BICOD-2017
Rim Moussa
 
React & ES6 Intro
React & ES6 IntroReact & ES6 Intro
React & ES6 Intro
Yair Aviner
 
Performance #3 layout&animation
Performance #3  layout&animationPerformance #3  layout&animation
Performance #3 layout&animation
Vitali Pekelis
 
Front end architecture patterns
Front end architecture patternsFront end architecture patterns
Front end architecture patterns
Oleksandr Tryshchenko
 
Best IEEE Projects 2017 -2018 Titles - IEEE Final Year Projects @ Brainrich T...
Best IEEE Projects 2017 -2018 Titles - IEEE Final Year Projects @ Brainrich T...Best IEEE Projects 2017 -2018 Titles - IEEE Final Year Projects @ Brainrich T...
Best IEEE Projects 2017 -2018 Titles - IEEE Final Year Projects @ Brainrich T...
Brainrich Technology
 
Why are we excited about MySQL 8? / Петр Зайцев (Percona)
Why are we excited about MySQL 8? / Петр Зайцев (Percona)Why are we excited about MySQL 8? / Петр Зайцев (Percona)
Why are we excited about MySQL 8? / Петр Зайцев (Percona)
Ontico
 
React Context API
React Context APIReact Context API
React Context API
NodeXperts
 
Uponor Exadata e-Business Suite Migration Case Study
Uponor Exadata e-Business Suite Migration Case StudyUponor Exadata e-Business Suite Migration Case Study
Uponor Exadata e-Business Suite Migration Case Study
Simo Vilmunen
 
Javascript
JavascriptJavascript
Javascript
Mallikarjuna G D
 
How to empower community by using GIS lecture 2
How to empower community by using GIS lecture 2How to empower community by using GIS lecture 2
How to empower community by using GIS lecture 2
wang yaohui
 

Similar to Redux (20)

The Proliferation of New Database Technologies and Implications for Data Scie...
The Proliferation of New Database Technologies and Implications for Data Scie...The Proliferation of New Database Technologies and Implications for Data Scie...
The Proliferation of New Database Technologies and Implications for Data Scie...
 
MVC6 - NetConf UY 2017
MVC6 -  NetConf UY 2017MVC6 -  NetConf UY 2017
MVC6 - NetConf UY 2017
 
Big Data with SQL Server
Big Data with SQL ServerBig Data with SQL Server
Big Data with SQL Server
 
Serverless Security at LASCON 2017
Serverless Security at LASCON 2017Serverless Security at LASCON 2017
Serverless Security at LASCON 2017
 
Scaling Data Quality @ Netflix
Scaling Data Quality @ NetflixScaling Data Quality @ Netflix
Scaling Data Quality @ Netflix
 
Whoops, The Numbers Are Wrong! Scaling Data Quality @ Netflix
Whoops, The Numbers Are Wrong! Scaling Data Quality @ NetflixWhoops, The Numbers Are Wrong! Scaling Data Quality @ Netflix
Whoops, The Numbers Are Wrong! Scaling Data Quality @ Netflix
 
How To Tweak Angular 2 Performance
How To Tweak Angular 2 PerformanceHow To Tweak Angular 2 Performance
How To Tweak Angular 2 Performance
 
Readinggroup xiang 24112016
Readinggroup xiang 24112016Readinggroup xiang 24112016
Readinggroup xiang 24112016
 
Serverless Security: A pragmatic primer for builders and defenders
Serverless Security: A pragmatic primer for builders and defendersServerless Security: A pragmatic primer for builders and defenders
Serverless Security: A pragmatic primer for builders and defenders
 
Bicod2017
Bicod2017Bicod2017
Bicod2017
 
BICOD-2017
BICOD-2017BICOD-2017
BICOD-2017
 
React & ES6 Intro
React & ES6 IntroReact & ES6 Intro
React & ES6 Intro
 
Performance #3 layout&animation
Performance #3  layout&animationPerformance #3  layout&animation
Performance #3 layout&animation
 
Front end architecture patterns
Front end architecture patternsFront end architecture patterns
Front end architecture patterns
 
Best IEEE Projects 2017 -2018 Titles - IEEE Final Year Projects @ Brainrich T...
Best IEEE Projects 2017 -2018 Titles - IEEE Final Year Projects @ Brainrich T...Best IEEE Projects 2017 -2018 Titles - IEEE Final Year Projects @ Brainrich T...
Best IEEE Projects 2017 -2018 Titles - IEEE Final Year Projects @ Brainrich T...
 
Why are we excited about MySQL 8? / Петр Зайцев (Percona)
Why are we excited about MySQL 8? / Петр Зайцев (Percona)Why are we excited about MySQL 8? / Петр Зайцев (Percona)
Why are we excited about MySQL 8? / Петр Зайцев (Percona)
 
React Context API
React Context APIReact Context API
React Context API
 
Uponor Exadata e-Business Suite Migration Case Study
Uponor Exadata e-Business Suite Migration Case StudyUponor Exadata e-Business Suite Migration Case Study
Uponor Exadata e-Business Suite Migration Case Study
 
Javascript
JavascriptJavascript
Javascript
 
How to empower community by using GIS lecture 2
How to empower community by using GIS lecture 2How to empower community by using GIS lecture 2
How to empower community by using GIS lecture 2
 

Recently uploaded

Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
UiPathCommunity
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
ScyllaDB
 
Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!
Tobias Schneck
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
Ajin Abraham
 
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
Fwdays
 
Christine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptxChristine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptx
christinelarrosa
 
From Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMsFrom Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMs
Sease
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
Fwdays
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdfLee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
leebarnesutopia
 
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeckPoznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
FilipTomaszewski5
 
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
AlexanderRichford
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
Fwdays
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
zjhamm304
 

Recently uploaded (20)

Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
 
Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
 
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
 
Christine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptxChristine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptx
 
From Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMsFrom Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMs
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdfLee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
 
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeckPoznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
 
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
 

Redux