SlideShare a Scribd company logo
006. REDUX FRAMEWORK
Presenter: Binh Quan
ReactJS - Redux
❖ Why Redux
❖ Store, Actions and Reducer
❖ Redux Alternatives
ReactJS - Why Redux
❖ State management for whole system
❖ One store / Multiple Reducers
❖ Connecting React components
❖ Dispatching events
❖ Server rendering (you don’t need any special API to manage)
ReactJS - without Redux
ReactJS - with Redux
ReactJS - without Redux vs with Redux
ReactJS - more about Redux
Read more:
★ https://css-tricks.com/learning-react-redux/
★ https://blog.jumpcut.com/why-redux-why-now-
32b3f95b59b#.4drj7z90i
ReactJS - Redux terms
Terms in Redux
❖ Application state
➢ State vs Stateless
❖ Reducers
❖ Store
❖ Provider
❖ Actions
❖ Dispatch
ReactJS - Redux flow
Basic flow
❖ Application state
❖ Reducers
❖ Store
❖ Provider
❖ Actions
❖ Dispatch
ReactJS - Redux side effects with API
middleware
Side effects
with
API middleware
❖ Application state
❖ Reducers
❖ Store
❖ Provider
❖ Actions
❖ Dispatch
ReactJS - Redux flow
More explanations:
★ https://github.com/reactjs/redux/issues/653
Reducers
The Reducer is function that takes
the previous state and an action,
processing previous state then
return next state.
Note:
❖ Each reducer often contains
initial state
❖ Next state is not that old state
with modification. It’s
completely a new object
New state (object) is
returned after
processing old state
Store
Store with single reducer
Store
Store with multiple reducers
Provider
Provider is top Component that
used to connect Redux store and
React Component
Actions
Actions are payloads of information
that send data from your
application to your store. They are
the only source of information for
the store. You send them to the
store using store.dispatch().
Dispatch
Dispatch is the method of sending
data from component to store for
processing according to specific
action.
Get application
state
Bind dispatch to
React Component
Now Demo
Ad

More Related Content

What's hot (20)

Improving build solutions dependency management with webpack
Improving build solutions  dependency management with webpackImproving build solutions  dependency management with webpack
Improving build solutions dependency management with webpack
NodeXperts
 
Production optimization with React and Webpack
Production optimization with React and WebpackProduction optimization with React and Webpack
Production optimization with React and Webpack
k88hudson
 
An Overview on Nuxt.js
An Overview on Nuxt.jsAn Overview on Nuxt.js
An Overview on Nuxt.js
Squash Apps Pvt Ltd
 
MEAN stack
MEAN stackMEAN stack
MEAN stack
Iryney Baran
 
Grunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationGrunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous Integration
David Amend
 
Bootstrapping angular js with bower grunt yeoman
Bootstrapping angular js with bower grunt yeomanBootstrapping angular js with bower grunt yeoman
Bootstrapping angular js with bower grunt yeoman
Makarand Bhatambarekar
 
Webpack Introduction
Webpack IntroductionWebpack Introduction
Webpack Introduction
Anjali Chawla
 
Webpack DevTalk
Webpack DevTalkWebpack DevTalk
Webpack DevTalk
Alessandro Bellini
 
Introduction of webpack 4
Introduction of webpack 4Introduction of webpack 4
Introduction of webpack 4
Vijay Shukla
 
Web application I have always dreamt of
Web application I have always dreamt ofWeb application I have always dreamt of
Web application I have always dreamt of
Victor_Cr
 
Webpack
Webpack Webpack
Webpack
DataArt
 
Nuxt Talk
Nuxt TalkNuxt Talk
Nuxt Talk
Sébastien Chopin
 
Nuxt.js - Introduction
Nuxt.js - IntroductionNuxt.js - Introduction
Nuxt.js - Introduction
Sébastien Chopin
 
Bundling your front-end with Webpack
Bundling your front-end with WebpackBundling your front-end with Webpack
Bundling your front-end with Webpack
Danillo Corvalan
 
Webpack and Web Performance Optimization
Webpack and Web Performance OptimizationWebpack and Web Performance Optimization
Webpack and Web Performance Optimization
Chen-Tien Tsai
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UI
Marcin Grzywaczewski
 
Angular 1.5 Components
Angular 1.5 ComponentsAngular 1.5 Components
Angular 1.5 Components
José Barbosa
 
GlassFish v3 : En Route Java EE 6
GlassFish v3 : En Route Java EE 6GlassFish v3 : En Route Java EE 6
GlassFish v3 : En Route Java EE 6
Alexis Moussine-Pouchkine
 
NodeSummit - MEAN Stack
NodeSummit - MEAN StackNodeSummit - MEAN Stack
NodeSummit - MEAN Stack
Valeri Karpov
 
Webpack 살펴보기
Webpack 살펴보기Webpack 살펴보기
Webpack 살펴보기
Sangwon Lee
 
Improving build solutions dependency management with webpack
Improving build solutions  dependency management with webpackImproving build solutions  dependency management with webpack
Improving build solutions dependency management with webpack
NodeXperts
 
Production optimization with React and Webpack
Production optimization with React and WebpackProduction optimization with React and Webpack
Production optimization with React and Webpack
k88hudson
 
Grunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationGrunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous Integration
David Amend
 
Bootstrapping angular js with bower grunt yeoman
Bootstrapping angular js with bower grunt yeomanBootstrapping angular js with bower grunt yeoman
Bootstrapping angular js with bower grunt yeoman
Makarand Bhatambarekar
 
Webpack Introduction
Webpack IntroductionWebpack Introduction
Webpack Introduction
Anjali Chawla
 
Introduction of webpack 4
Introduction of webpack 4Introduction of webpack 4
Introduction of webpack 4
Vijay Shukla
 
Web application I have always dreamt of
Web application I have always dreamt ofWeb application I have always dreamt of
Web application I have always dreamt of
Victor_Cr
 
Webpack
Webpack Webpack
Webpack
DataArt
 
Bundling your front-end with Webpack
Bundling your front-end with WebpackBundling your front-end with Webpack
Bundling your front-end with Webpack
Danillo Corvalan
 
Webpack and Web Performance Optimization
Webpack and Web Performance OptimizationWebpack and Web Performance Optimization
Webpack and Web Performance Optimization
Chen-Tien Tsai
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UI
Marcin Grzywaczewski
 
Angular 1.5 Components
Angular 1.5 ComponentsAngular 1.5 Components
Angular 1.5 Components
José Barbosa
 
NodeSummit - MEAN Stack
NodeSummit - MEAN StackNodeSummit - MEAN Stack
NodeSummit - MEAN Stack
Valeri Karpov
 
Webpack 살펴보기
Webpack 살펴보기Webpack 살펴보기
Webpack 살펴보기
Sangwon Lee
 

Viewers also liked (20)

React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux Introduction
Nikolaus Graf
 
003. ReactJS basic
003. ReactJS basic003. ReactJS basic
003. ReactJS basic
Binh Quan Duc
 
Intro to ReactJS
Intro to ReactJSIntro to ReactJS
Intro to ReactJS
Harvard Web Working Group
 
004. Working with React component
004. Working with React component004. Working with React component
004. Working with React component
Binh Quan Duc
 
Starting with Reactjs
Starting with ReactjsStarting with Reactjs
Starting with Reactjs
Thinh VoXuan
 
React + Redux for Web Developers
React + Redux for Web DevelopersReact + Redux for Web Developers
React + Redux for Web Developers
Jamal Sinclair O'Garro
 
RxJS + Redux + React = Amazing
RxJS + Redux + React = AmazingRxJS + Redux + React = Amazing
RxJS + Redux + React = Amazing
Jay Phelps
 
React lecture
React lectureReact lecture
React lecture
Christoffer Noring
 
Introduction to ReactJS
Introduction to ReactJSIntroduction to ReactJS
Introduction to ReactJS
Tu Hoang
 
Workshop 22: ReactJS Redux Advanced
Workshop 22: ReactJS Redux AdvancedWorkshop 22: ReactJS Redux Advanced
Workshop 22: ReactJS Redux Advanced
Visual Engineering
 
brocade-five-pillars-federal-data-centers-wp (1)
brocade-five-pillars-federal-data-centers-wp (1)brocade-five-pillars-federal-data-centers-wp (1)
brocade-five-pillars-federal-data-centers-wp (1)
Vince Garr
 
A Taste Of Glory
A Taste Of GloryA Taste Of Glory
A Taste Of Glory
CrossPointBible
 
Climate Change
Climate ChangeClimate Change
Climate Change
Jeffjgd
 
Surgery trip manual - Oct 2011
Surgery trip manual - Oct 2011Surgery trip manual - Oct 2011
Surgery trip manual - Oct 2011
The Shalom Foundation
 
Περιγραφή ιδέας ECONET
Περιγραφή ιδέας ECONETΠεριγραφή ιδέας ECONET
Περιγραφή ιδέας ECONET
georgetrianta
 
Travel Guide for the End Times
Travel Guide for the End TimesTravel Guide for the End Times
Travel Guide for the End Times
CrossPointBible
 
REUECDLpaper
REUECDLpaperREUECDLpaper
REUECDLpaper
David Goldberger
 
sujit resume
sujit resumesujit resume
sujit resume
sujit chand
 
React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux Introduction
Nikolaus Graf
 
004. Working with React component
004. Working with React component004. Working with React component
004. Working with React component
Binh Quan Duc
 
Starting with Reactjs
Starting with ReactjsStarting with Reactjs
Starting with Reactjs
Thinh VoXuan
 
RxJS + Redux + React = Amazing
RxJS + Redux + React = AmazingRxJS + Redux + React = Amazing
RxJS + Redux + React = Amazing
Jay Phelps
 
Introduction to ReactJS
Introduction to ReactJSIntroduction to ReactJS
Introduction to ReactJS
Tu Hoang
 
Workshop 22: ReactJS Redux Advanced
Workshop 22: ReactJS Redux AdvancedWorkshop 22: ReactJS Redux Advanced
Workshop 22: ReactJS Redux Advanced
Visual Engineering
 
brocade-five-pillars-federal-data-centers-wp (1)
brocade-five-pillars-federal-data-centers-wp (1)brocade-five-pillars-federal-data-centers-wp (1)
brocade-five-pillars-federal-data-centers-wp (1)
Vince Garr
 
Climate Change
Climate ChangeClimate Change
Climate Change
Jeffjgd
 
Περιγραφή ιδέας ECONET
Περιγραφή ιδέας ECONETΠεριγραφή ιδέας ECONET
Περιγραφή ιδέας ECONET
georgetrianta
 
Travel Guide for the End Times
Travel Guide for the End TimesTravel Guide for the End Times
Travel Guide for the End Times
CrossPointBible
 
Ad

Similar to 006. React - Redux framework (20)

React on rails v6.1 at LA Ruby, November 2016
React on rails v6.1 at LA Ruby, November 2016React on rails v6.1 at LA Ruby, November 2016
React on rails v6.1 at LA Ruby, November 2016
Justin Gordon
 
Integrating React.js Into a PHP Application: Dutch PHP 2019
Integrating React.js Into a PHP Application: Dutch PHP 2019Integrating React.js Into a PHP Application: Dutch PHP 2019
Integrating React.js Into a PHP Application: Dutch PHP 2019
Andrew Rota
 
React on rails v4
React on rails v4React on rails v4
React on rails v4
Justin Gordon
 
Using redux
Using reduxUsing redux
Using redux
Jonas Ohlsson Aden
 
JS Chicago Meetup 2/23/16 - Redux & Routes
JS Chicago Meetup 2/23/16 - Redux & RoutesJS Chicago Meetup 2/23/16 - Redux & Routes
JS Chicago Meetup 2/23/16 - Redux & Routes
Nick Dreckshage
 
From PHP to React - case study
From PHP to React - case studyFrom PHP to React - case study
From PHP to React - case study
Sparkbit
 
Academy PRO: React JS. Redux & Tooling
Academy PRO: React JS. Redux & ToolingAcademy PRO: React JS. Redux & Tooling
Academy PRO: React JS. Redux & Tooling
Binary Studio
 
Backbone.js with React Views - Server Rendering, Virtual DOM, and More!
Backbone.js with React Views - Server Rendering, Virtual DOM, and More!Backbone.js with React Views - Server Rendering, Virtual DOM, and More!
Backbone.js with React Views - Server Rendering, Virtual DOM, and More!
Ryan Roemer
 
Matheus Marsiglio - Isomorphic React + Redux App
Matheus Marsiglio - Isomorphic React + Redux AppMatheus Marsiglio - Isomorphic React + Redux App
Matheus Marsiglio - Isomorphic React + Redux App
React Conf Brasil
 
Web services Hand_Out
Web services Hand_OutWeb services Hand_Out
Web services Hand_Out
Kumar Gupta
 
Targeting Mobile Platform with MVC 4.0
Targeting Mobile Platform with MVC 4.0Targeting Mobile Platform with MVC 4.0
Targeting Mobile Platform with MVC 4.0
Mayank Srivastava
 
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaSc...
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaSc...Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaSc...
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaSc...
Joonas Lehtinen
 
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Zach Lendon
 
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
MidwestJS 2014 Reconciling ReactJS as a View Layer ReplacementMidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
Zach Lendon
 
VMware Vsan vtug 2014
VMware Vsan vtug 2014VMware Vsan vtug 2014
VMware Vsan vtug 2014
csharney
 
JavaFX Enterprise (JavaOne 2014)
JavaFX Enterprise (JavaOne 2014)JavaFX Enterprise (JavaOne 2014)
JavaFX Enterprise (JavaOne 2014)
Hendrik Ebbers
 
Server Side React for WordPress by Muhammad Muhsin @ The JavaScript for WordP...
Server Side React for WordPress by Muhammad Muhsin @ The JavaScript for WordP...Server Side React for WordPress by Muhammad Muhsin @ The JavaScript for WordP...
Server Side React for WordPress by Muhammad Muhsin @ The JavaScript for WordP...
rtCamp
 
Deployment of DevOps Environment with CA Solutions
Deployment of DevOps Environment with CA SolutionsDeployment of DevOps Environment with CA Solutions
Deployment of DevOps Environment with CA Solutions
Nic Swart
 
VMware virtual SAN 6 overview
VMware virtual SAN 6 overviewVMware virtual SAN 6 overview
VMware virtual SAN 6 overview
solarisyougood
 
React gsg presentation with ryan jung & elias malik
React   gsg presentation with ryan jung & elias malikReact   gsg presentation with ryan jung & elias malik
React gsg presentation with ryan jung & elias malik
Lama K Banna
 
React on rails v6.1 at LA Ruby, November 2016
React on rails v6.1 at LA Ruby, November 2016React on rails v6.1 at LA Ruby, November 2016
React on rails v6.1 at LA Ruby, November 2016
Justin Gordon
 
Integrating React.js Into a PHP Application: Dutch PHP 2019
Integrating React.js Into a PHP Application: Dutch PHP 2019Integrating React.js Into a PHP Application: Dutch PHP 2019
Integrating React.js Into a PHP Application: Dutch PHP 2019
Andrew Rota
 
JS Chicago Meetup 2/23/16 - Redux & Routes
JS Chicago Meetup 2/23/16 - Redux & RoutesJS Chicago Meetup 2/23/16 - Redux & Routes
JS Chicago Meetup 2/23/16 - Redux & Routes
Nick Dreckshage
 
From PHP to React - case study
From PHP to React - case studyFrom PHP to React - case study
From PHP to React - case study
Sparkbit
 
Academy PRO: React JS. Redux & Tooling
Academy PRO: React JS. Redux & ToolingAcademy PRO: React JS. Redux & Tooling
Academy PRO: React JS. Redux & Tooling
Binary Studio
 
Backbone.js with React Views - Server Rendering, Virtual DOM, and More!
Backbone.js with React Views - Server Rendering, Virtual DOM, and More!Backbone.js with React Views - Server Rendering, Virtual DOM, and More!
Backbone.js with React Views - Server Rendering, Virtual DOM, and More!
Ryan Roemer
 
Matheus Marsiglio - Isomorphic React + Redux App
Matheus Marsiglio - Isomorphic React + Redux AppMatheus Marsiglio - Isomorphic React + Redux App
Matheus Marsiglio - Isomorphic React + Redux App
React Conf Brasil
 
Web services Hand_Out
Web services Hand_OutWeb services Hand_Out
Web services Hand_Out
Kumar Gupta
 
Targeting Mobile Platform with MVC 4.0
Targeting Mobile Platform with MVC 4.0Targeting Mobile Platform with MVC 4.0
Targeting Mobile Platform with MVC 4.0
Mayank Srivastava
 
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaSc...
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaSc...Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaSc...
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaSc...
Joonas Lehtinen
 
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Zach Lendon
 
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
MidwestJS 2014 Reconciling ReactJS as a View Layer ReplacementMidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
Zach Lendon
 
VMware Vsan vtug 2014
VMware Vsan vtug 2014VMware Vsan vtug 2014
VMware Vsan vtug 2014
csharney
 
JavaFX Enterprise (JavaOne 2014)
JavaFX Enterprise (JavaOne 2014)JavaFX Enterprise (JavaOne 2014)
JavaFX Enterprise (JavaOne 2014)
Hendrik Ebbers
 
Server Side React for WordPress by Muhammad Muhsin @ The JavaScript for WordP...
Server Side React for WordPress by Muhammad Muhsin @ The JavaScript for WordP...Server Side React for WordPress by Muhammad Muhsin @ The JavaScript for WordP...
Server Side React for WordPress by Muhammad Muhsin @ The JavaScript for WordP...
rtCamp
 
Deployment of DevOps Environment with CA Solutions
Deployment of DevOps Environment with CA SolutionsDeployment of DevOps Environment with CA Solutions
Deployment of DevOps Environment with CA Solutions
Nic Swart
 
VMware virtual SAN 6 overview
VMware virtual SAN 6 overviewVMware virtual SAN 6 overview
VMware virtual SAN 6 overview
solarisyougood
 
React gsg presentation with ryan jung & elias malik
React   gsg presentation with ryan jung & elias malikReact   gsg presentation with ryan jung & elias malik
React gsg presentation with ryan jung & elias malik
Lama K Banna
 
Ad

Recently uploaded (20)

How to Optimize Your AWS Environment for Improved Cloud Performance
How to Optimize Your AWS Environment for Improved Cloud PerformanceHow to Optimize Your AWS Environment for Improved Cloud Performance
How to Optimize Your AWS Environment for Improved Cloud Performance
ThousandEyes
 
Douwan Crack 2025 new verson+ License code
Douwan Crack 2025 new verson+ License codeDouwan Crack 2025 new verson+ License code
Douwan Crack 2025 new verson+ License code
aneelaramzan63
 
Sales Deck SentinelOne Singularity Platform.pptx
Sales Deck SentinelOne Singularity Platform.pptxSales Deck SentinelOne Singularity Platform.pptx
Sales Deck SentinelOne Singularity Platform.pptx
EliandoLawnote
 
Top 10 Client Portal Software Solutions for 2025.docx
Top 10 Client Portal Software Solutions for 2025.docxTop 10 Client Portal Software Solutions for 2025.docx
Top 10 Client Portal Software Solutions for 2025.docx
Portli
 
Exploring Wayland: A Modern Display Server for the Future
Exploring Wayland: A Modern Display Server for the FutureExploring Wayland: A Modern Display Server for the Future
Exploring Wayland: A Modern Display Server for the Future
ICS
 
Mastering OOP: Understanding the Four Core Pillars
Mastering OOP: Understanding the Four Core PillarsMastering OOP: Understanding the Four Core Pillars
Mastering OOP: Understanding the Four Core Pillars
Marcel David
 
Explaining GitHub Actions Failures with Large Language Models Challenges, In...
Explaining GitHub Actions Failures with Large Language Models Challenges, In...Explaining GitHub Actions Failures with Large Language Models Challenges, In...
Explaining GitHub Actions Failures with Large Language Models Challenges, In...
ssuserb14185
 
Adobe Lightroom Classic Crack FREE Latest link 2025
Adobe Lightroom Classic Crack FREE Latest link 2025Adobe Lightroom Classic Crack FREE Latest link 2025
Adobe Lightroom Classic Crack FREE Latest link 2025
kashifyounis067
 
Adobe Master Collection CC Crack Advance Version 2025
Adobe Master Collection CC Crack Advance Version 2025Adobe Master Collection CC Crack Advance Version 2025
Adobe Master Collection CC Crack Advance Version 2025
kashifyounis067
 
Adobe Photoshop Lightroom CC 2025 Crack Latest Version
Adobe Photoshop Lightroom CC 2025 Crack Latest VersionAdobe Photoshop Lightroom CC 2025 Crack Latest Version
Adobe Photoshop Lightroom CC 2025 Crack Latest Version
usmanhidray
 
Shift Left using Lean for Agile Software Development
Shift Left using Lean for Agile Software DevelopmentShift Left using Lean for Agile Software Development
Shift Left using Lean for Agile Software Development
SathyaShankar6
 
Get & Download Wondershare Filmora Crack Latest [2025]
Get & Download Wondershare Filmora Crack Latest [2025]Get & Download Wondershare Filmora Crack Latest [2025]
Get & Download Wondershare Filmora Crack Latest [2025]
saniaaftab72555
 
Adobe Illustrator Crack FREE Download 2025 Latest Version
Adobe Illustrator Crack FREE Download 2025 Latest VersionAdobe Illustrator Crack FREE Download 2025 Latest Version
Adobe Illustrator Crack FREE Download 2025 Latest Version
kashifyounis067
 
Solidworks Crack 2025 latest new + license code
Solidworks Crack 2025 latest new + license codeSolidworks Crack 2025 latest new + license code
Solidworks Crack 2025 latest new + license code
aneelaramzan63
 
How to Batch Export Lotus Notes NSF Emails to Outlook PST Easily?
How to Batch Export Lotus Notes NSF Emails to Outlook PST Easily?How to Batch Export Lotus Notes NSF Emails to Outlook PST Easily?
How to Batch Export Lotus Notes NSF Emails to Outlook PST Easily?
steaveroggers
 
The Significance of Hardware in Information Systems.pdf
The Significance of Hardware in Information Systems.pdfThe Significance of Hardware in Information Systems.pdf
The Significance of Hardware in Information Systems.pdf
drewplanas10
 
Salesforce Data Cloud- Hyperscale data platform, built for Salesforce.
Salesforce Data Cloud- Hyperscale data platform, built for Salesforce.Salesforce Data Cloud- Hyperscale data platform, built for Salesforce.
Salesforce Data Cloud- Hyperscale data platform, built for Salesforce.
Dele Amefo
 
Scaling GraphRAG: Efficient Knowledge Retrieval for Enterprise AI
Scaling GraphRAG:  Efficient Knowledge Retrieval for Enterprise AIScaling GraphRAG:  Efficient Knowledge Retrieval for Enterprise AI
Scaling GraphRAG: Efficient Knowledge Retrieval for Enterprise AI
danshalev
 
Microsoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdf
Microsoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdfMicrosoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdf
Microsoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdf
TechSoup
 
Minitab 22 Full Crack Plus Product Key Free Download [Latest] 2025
Minitab 22 Full Crack Plus Product Key Free Download [Latest] 2025Minitab 22 Full Crack Plus Product Key Free Download [Latest] 2025
Minitab 22 Full Crack Plus Product Key Free Download [Latest] 2025
wareshashahzadiii
 
How to Optimize Your AWS Environment for Improved Cloud Performance
How to Optimize Your AWS Environment for Improved Cloud PerformanceHow to Optimize Your AWS Environment for Improved Cloud Performance
How to Optimize Your AWS Environment for Improved Cloud Performance
ThousandEyes
 
Douwan Crack 2025 new verson+ License code
Douwan Crack 2025 new verson+ License codeDouwan Crack 2025 new verson+ License code
Douwan Crack 2025 new verson+ License code
aneelaramzan63
 
Sales Deck SentinelOne Singularity Platform.pptx
Sales Deck SentinelOne Singularity Platform.pptxSales Deck SentinelOne Singularity Platform.pptx
Sales Deck SentinelOne Singularity Platform.pptx
EliandoLawnote
 
Top 10 Client Portal Software Solutions for 2025.docx
Top 10 Client Portal Software Solutions for 2025.docxTop 10 Client Portal Software Solutions for 2025.docx
Top 10 Client Portal Software Solutions for 2025.docx
Portli
 
Exploring Wayland: A Modern Display Server for the Future
Exploring Wayland: A Modern Display Server for the FutureExploring Wayland: A Modern Display Server for the Future
Exploring Wayland: A Modern Display Server for the Future
ICS
 
Mastering OOP: Understanding the Four Core Pillars
Mastering OOP: Understanding the Four Core PillarsMastering OOP: Understanding the Four Core Pillars
Mastering OOP: Understanding the Four Core Pillars
Marcel David
 
Explaining GitHub Actions Failures with Large Language Models Challenges, In...
Explaining GitHub Actions Failures with Large Language Models Challenges, In...Explaining GitHub Actions Failures with Large Language Models Challenges, In...
Explaining GitHub Actions Failures with Large Language Models Challenges, In...
ssuserb14185
 
Adobe Lightroom Classic Crack FREE Latest link 2025
Adobe Lightroom Classic Crack FREE Latest link 2025Adobe Lightroom Classic Crack FREE Latest link 2025
Adobe Lightroom Classic Crack FREE Latest link 2025
kashifyounis067
 
Adobe Master Collection CC Crack Advance Version 2025
Adobe Master Collection CC Crack Advance Version 2025Adobe Master Collection CC Crack Advance Version 2025
Adobe Master Collection CC Crack Advance Version 2025
kashifyounis067
 
Adobe Photoshop Lightroom CC 2025 Crack Latest Version
Adobe Photoshop Lightroom CC 2025 Crack Latest VersionAdobe Photoshop Lightroom CC 2025 Crack Latest Version
Adobe Photoshop Lightroom CC 2025 Crack Latest Version
usmanhidray
 
Shift Left using Lean for Agile Software Development
Shift Left using Lean for Agile Software DevelopmentShift Left using Lean for Agile Software Development
Shift Left using Lean for Agile Software Development
SathyaShankar6
 
Get & Download Wondershare Filmora Crack Latest [2025]
Get & Download Wondershare Filmora Crack Latest [2025]Get & Download Wondershare Filmora Crack Latest [2025]
Get & Download Wondershare Filmora Crack Latest [2025]
saniaaftab72555
 
Adobe Illustrator Crack FREE Download 2025 Latest Version
Adobe Illustrator Crack FREE Download 2025 Latest VersionAdobe Illustrator Crack FREE Download 2025 Latest Version
Adobe Illustrator Crack FREE Download 2025 Latest Version
kashifyounis067
 
Solidworks Crack 2025 latest new + license code
Solidworks Crack 2025 latest new + license codeSolidworks Crack 2025 latest new + license code
Solidworks Crack 2025 latest new + license code
aneelaramzan63
 
How to Batch Export Lotus Notes NSF Emails to Outlook PST Easily?
How to Batch Export Lotus Notes NSF Emails to Outlook PST Easily?How to Batch Export Lotus Notes NSF Emails to Outlook PST Easily?
How to Batch Export Lotus Notes NSF Emails to Outlook PST Easily?
steaveroggers
 
The Significance of Hardware in Information Systems.pdf
The Significance of Hardware in Information Systems.pdfThe Significance of Hardware in Information Systems.pdf
The Significance of Hardware in Information Systems.pdf
drewplanas10
 
Salesforce Data Cloud- Hyperscale data platform, built for Salesforce.
Salesforce Data Cloud- Hyperscale data platform, built for Salesforce.Salesforce Data Cloud- Hyperscale data platform, built for Salesforce.
Salesforce Data Cloud- Hyperscale data platform, built for Salesforce.
Dele Amefo
 
Scaling GraphRAG: Efficient Knowledge Retrieval for Enterprise AI
Scaling GraphRAG:  Efficient Knowledge Retrieval for Enterprise AIScaling GraphRAG:  Efficient Knowledge Retrieval for Enterprise AI
Scaling GraphRAG: Efficient Knowledge Retrieval for Enterprise AI
danshalev
 
Microsoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdf
Microsoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdfMicrosoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdf
Microsoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdf
TechSoup
 
Minitab 22 Full Crack Plus Product Key Free Download [Latest] 2025
Minitab 22 Full Crack Plus Product Key Free Download [Latest] 2025Minitab 22 Full Crack Plus Product Key Free Download [Latest] 2025
Minitab 22 Full Crack Plus Product Key Free Download [Latest] 2025
wareshashahzadiii
 

006. React - Redux framework

  • 2. ReactJS - Redux ❖ Why Redux ❖ Store, Actions and Reducer ❖ Redux Alternatives
  • 3. ReactJS - Why Redux ❖ State management for whole system ❖ One store / Multiple Reducers ❖ Connecting React components ❖ Dispatching events ❖ Server rendering (you don’t need any special API to manage)
  • 6. ReactJS - without Redux vs with Redux
  • 7. ReactJS - more about Redux Read more: ★ https://css-tricks.com/learning-react-redux/ ★ https://blog.jumpcut.com/why-redux-why-now- 32b3f95b59b#.4drj7z90i
  • 8. ReactJS - Redux terms Terms in Redux ❖ Application state ➢ State vs Stateless ❖ Reducers ❖ Store ❖ Provider ❖ Actions ❖ Dispatch
  • 9. ReactJS - Redux flow Basic flow ❖ Application state ❖ Reducers ❖ Store ❖ Provider ❖ Actions ❖ Dispatch
  • 10. ReactJS - Redux side effects with API middleware Side effects with API middleware ❖ Application state ❖ Reducers ❖ Store ❖ Provider ❖ Actions ❖ Dispatch
  • 11. ReactJS - Redux flow More explanations: ★ https://github.com/reactjs/redux/issues/653
  • 12. Reducers The Reducer is function that takes the previous state and an action, processing previous state then return next state. Note: ❖ Each reducer often contains initial state ❖ Next state is not that old state with modification. It’s completely a new object New state (object) is returned after processing old state
  • 15. Provider Provider is top Component that used to connect Redux store and React Component
  • 16. Actions Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch().
  • 17. Dispatch Dispatch is the method of sending data from component to store for processing according to specific action.