SlideShare a Scribd company logo

006. React - Redux framework

Using React and Redux

1 of 20
Download to read offline
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
Ad

Recommended

005. a React project structure
005. a React project structure005. a React project structure
005. a React project structureBinh Quan Duc
 
002. Working with Webpack
002. Working with Webpack002. Working with Webpack
002. Working with WebpackBinh Quan Duc
 
007. Redux middlewares
007. Redux middlewares007. Redux middlewares
007. Redux middlewaresBinh Quan Duc
 
001. Introduction about React
001. Introduction about React001. Introduction about React
001. Introduction about ReactBinh Quan Duc
 
Bundle your modules with Webpack
Bundle your modules with WebpackBundle your modules with Webpack
Bundle your modules with WebpackJake Peyser
 
DotNet MVC and webpack + Babel + react
DotNet MVC and webpack + Babel + reactDotNet MVC and webpack + Babel + react
DotNet MVC and webpack + Babel + reactChen-Tien Tsai
 
Packing for the Web with Webpack
Packing for the Web with WebpackPacking for the Web with Webpack
Packing for the Web with WebpackThiago Temple
 

More Related Content

What's hot

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 webpackNodeXperts
 
Production optimization with React and Webpack
Production optimization with React and WebpackProduction optimization with React and Webpack
Production optimization with React and Webpackk88hudson
 
Grunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationGrunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationDavid 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 yeomanMakarand Bhatambarekar
 
Webpack Introduction
Webpack IntroductionWebpack Introduction
Webpack IntroductionAnjali Chawla
 
Introduction of webpack 4
Introduction of webpack 4Introduction of webpack 4
Introduction of webpack 4Vijay 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 ofVictor_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 WebpackDanillo Corvalan
 
Webpack and Web Performance Optimization
Webpack and Web Performance OptimizationWebpack and Web Performance Optimization
Webpack and Web Performance OptimizationChen-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 UIMarcin Grzywaczewski
 
Angular 1.5 Components
Angular 1.5 ComponentsAngular 1.5 Components
Angular 1.5 ComponentsJosé Barbosa
 
NodeSummit - MEAN Stack
NodeSummit - MEAN StackNodeSummit - MEAN Stack
NodeSummit - MEAN StackValeri Karpov
 
Webpack 살펴보기
Webpack 살펴보기Webpack 살펴보기
Webpack 살펴보기Sangwon Lee
 

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
 
Production optimization with React and Webpack
Production optimization with React and WebpackProduction optimization with React and Webpack
Production optimization with React and Webpack
 
An Overview on Nuxt.js
An Overview on Nuxt.jsAn Overview on Nuxt.js
An Overview on Nuxt.js
 
MEAN stack
MEAN stackMEAN stack
MEAN stack
 
Grunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationGrunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous Integration
 
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
 
Webpack Introduction
Webpack IntroductionWebpack Introduction
Webpack Introduction
 
Webpack DevTalk
Webpack DevTalkWebpack DevTalk
Webpack DevTalk
 
Introduction of webpack 4
Introduction of webpack 4Introduction of webpack 4
Introduction of webpack 4
 
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
 
Webpack
Webpack Webpack
Webpack
 
Nuxt Talk
Nuxt TalkNuxt Talk
Nuxt Talk
 
Nuxt.js - Introduction
Nuxt.js - IntroductionNuxt.js - Introduction
Nuxt.js - Introduction
 
Bundling your front-end with Webpack
Bundling your front-end with WebpackBundling your front-end with Webpack
Bundling your front-end with Webpack
 
Webpack and Web Performance Optimization
Webpack and Web Performance OptimizationWebpack and Web Performance Optimization
Webpack and Web Performance Optimization
 
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
 
Angular 1.5 Components
Angular 1.5 ComponentsAngular 1.5 Components
Angular 1.5 Components
 
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
 
NodeSummit - MEAN Stack
NodeSummit - MEAN StackNodeSummit - MEAN Stack
NodeSummit - MEAN Stack
 
Webpack 살펴보기
Webpack 살펴보기Webpack 살펴보기
Webpack 살펴보기
 

Viewers also liked

React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux IntroductionNikolaus Graf
 
004. Working with React component
004. Working with React component004. Working with React component
004. Working with React componentBinh Quan Duc
 
Starting with Reactjs
Starting with ReactjsStarting with Reactjs
Starting with ReactjsThinh VoXuan
 
RxJS + Redux + React = Amazing
RxJS + Redux + React = AmazingRxJS + Redux + React = Amazing
RxJS + Redux + React = AmazingJay Phelps
 
Introduction to ReactJS
Introduction to ReactJSIntroduction to ReactJS
Introduction to ReactJSTu Hoang
 
Workshop 22: ReactJS Redux Advanced
Workshop 22: ReactJS Redux AdvancedWorkshop 22: ReactJS Redux Advanced
Workshop 22: ReactJS Redux AdvancedVisual 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 ChangeJeffjgd
 
Περιγραφή ιδέας ECONET
Περιγραφή ιδέας ECONETΠεριγραφή ιδέας ECONET
Περιγραφή ιδέας ECONETgeorgetrianta
 
Travel Guide for the End Times
Travel Guide for the End TimesTravel Guide for the End Times
Travel Guide for the End TimesCrossPointBible
 

Viewers also liked (20)

React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux Introduction
 
003. ReactJS basic
003. ReactJS basic003. ReactJS basic
003. ReactJS basic
 
Intro to ReactJS
Intro to ReactJSIntro to ReactJS
Intro to ReactJS
 
004. Working with React component
004. Working with React component004. Working with React component
004. Working with React component
 
Starting with Reactjs
Starting with ReactjsStarting with Reactjs
Starting with Reactjs
 
React + Redux for Web Developers
React + Redux for Web DevelopersReact + Redux for Web Developers
React + Redux for Web Developers
 
RxJS + Redux + React = Amazing
RxJS + Redux + React = AmazingRxJS + Redux + React = Amazing
RxJS + Redux + React = Amazing
 
React lecture
React lectureReact lecture
React lecture
 
Introduction to ReactJS
Introduction to ReactJSIntroduction to ReactJS
Introduction to ReactJS
 
Workshop 22: ReactJS Redux Advanced
Workshop 22: ReactJS Redux AdvancedWorkshop 22: ReactJS Redux Advanced
Workshop 22: ReactJS Redux Advanced
 
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)
 
A Taste Of Glory
A Taste Of GloryA Taste Of Glory
A Taste Of Glory
 
Climate Change
Climate ChangeClimate Change
Climate Change
 
Surgery trip manual - Oct 2011
Surgery trip manual - Oct 2011Surgery trip manual - Oct 2011
Surgery trip manual - Oct 2011
 
Artikel. På Ferie i Jernalderen (2010)
Artikel. På Ferie i Jernalderen (2010)Artikel. På Ferie i Jernalderen (2010)
Artikel. På Ferie i Jernalderen (2010)
 
Περιγραφή ιδέας ECONET
Περιγραφή ιδέας ECONETΠεριγραφή ιδέας ECONET
Περιγραφή ιδέας ECONET
 
JP byvandring langs Nørrevold - 14.06.14
JP byvandring langs Nørrevold - 14.06.14JP byvandring langs Nørrevold - 14.06.14
JP byvandring langs Nørrevold - 14.06.14
 
Travel Guide for the End Times
Travel Guide for the End TimesTravel Guide for the End Times
Travel Guide for the End Times
 
REUECDLpaper
REUECDLpaperREUECDLpaper
REUECDLpaper
 
sujit resume
sujit resumesujit resume
sujit resume
 

Similar to 006. React - Redux framework

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 2016Justin 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 2019Andrew 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 & RoutesNick Dreckshage
 
From PHP to React - case study
From PHP to React - case studyFrom PHP to React - case study
From PHP to React - case studySparkbit
 
Academy PRO: React JS. Redux & Tooling
Academy PRO: React JS. Redux & ToolingAcademy PRO: React JS. Redux & Tooling
Academy PRO: React JS. Redux & ToolingBinary 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 AppReact Conf Brasil
 
Web services Hand_Out
Web services Hand_OutWeb services Hand_Out
Web services Hand_OutKumar 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.0Mayank 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
 
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 ReplacementZach Lendon
 
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
 
VMware Vsan vtug 2014
VMware Vsan vtug 2014VMware Vsan vtug 2014
VMware Vsan vtug 2014csharney
 
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 SolutionsNic Swart
 
VMware virtual SAN 6 overview
VMware virtual SAN 6 overviewVMware virtual SAN 6 overview
VMware virtual SAN 6 overviewsolarisyougood
 
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 malikLama K Banna
 

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
 
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
 
React on rails v4
React on rails v4React on rails v4
React on rails v4
 
Using redux
Using reduxUsing redux
Using redux
 
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
 
From PHP to React - case study
From PHP to React - case studyFrom PHP to React - case study
From PHP to React - case study
 
Academy PRO: React JS. Redux & Tooling
Academy PRO: React JS. Redux & ToolingAcademy PRO: React JS. Redux & Tooling
Academy PRO: React JS. Redux & Tooling
 
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!
 
Matheus Marsiglio - Isomorphic React + Redux App
Matheus Marsiglio - Isomorphic React + Redux AppMatheus Marsiglio - Isomorphic React + Redux App
Matheus Marsiglio - Isomorphic React + Redux App
 
Web services Hand_Out
Web services Hand_OutWeb services Hand_Out
Web services Hand_Out
 
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
 
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...
 
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
 
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)
 
VMware Vsan vtug 2014
VMware Vsan vtug 2014VMware Vsan vtug 2014
VMware Vsan vtug 2014
 
JavaFX Enterprise (JavaOne 2014)
JavaFX Enterprise (JavaOne 2014)JavaFX Enterprise (JavaOne 2014)
JavaFX Enterprise (JavaOne 2014)
 
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...
 
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
 
VMware virtual SAN 6 overview
VMware virtual SAN 6 overviewVMware virtual SAN 6 overview
VMware virtual SAN 6 overview
 
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
 

Recently uploaded

The Age of AI: Elevating Experiences & Delivering Customer Value!
The Age of AI: Elevating Experiences & Delivering Customer Value!The Age of AI: Elevating Experiences & Delivering Customer Value!
The Age of AI: Elevating Experiences & Delivering Customer Value!ISPMAIndia
 
Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)Jeffrey Haguewood
 
maximum subarray ppt for killing camp students
maximum subarray ppt for killing camp studentsmaximum subarray ppt for killing camp students
maximum subarray ppt for killing camp studentsssuser82c38d
 
Getting Started with Trello for Beginners.pptx
Getting Started with Trello for Beginners.pptxGetting Started with Trello for Beginners.pptx
Getting Started with Trello for Beginners.pptxmavinoikein
 
AI Product Management by Abhijit Bendigiri
AI Product Management by Abhijit BendigiriAI Product Management by Abhijit Bendigiri
AI Product Management by Abhijit BendigiriISPMAIndia
 
AUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdf
AUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdfAUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdf
AUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdfAutokey
 
OpenChain AI Study Group - North America and Europe - 2024-02-20
OpenChain AI Study Group - North America and Europe - 2024-02-20OpenChain AI Study Group - North America and Europe - 2024-02-20
OpenChain AI Study Group - North America and Europe - 2024-02-20Shane Coughlan
 
killing camp week 6 problem - maximal matrix.pdf
killing camp week 6 problem - maximal matrix.pdfkilling camp week 6 problem - maximal matrix.pdf
killing camp week 6 problem - maximal matrix.pdfssuser82c38d
 
"Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ...
"Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ..."Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ...
"Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ...ISPMAIndia
 
No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!Anthony Dahanne
 
SPM 2024 – Overview of and benefits of AI in Product Management
SPM 2024 – Overview of and benefits of AI in Product ManagementSPM 2024 – Overview of and benefits of AI in Product Management
SPM 2024 – Overview of and benefits of AI in Product ManagementISPMAIndia
 
Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...
Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...
Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...ISPMAIndia
 
killingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdfkillingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdfssuser82c38d
 
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A..."Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...ISPMAIndia
 
Open Sprintera (Where Open Source Sparks a Sprint of Possibilities)
Open Sprintera (Where Open Source Sparks a Sprint of Possibilities)Open Sprintera (Where Open Source Sparks a Sprint of Possibilities)
Open Sprintera (Where Open Source Sparks a Sprint of Possibilities)GDSCNiT
 
P1 Inspection Types in Municity 5 Smartsheet
P1 Inspection Types in Municity 5 SmartsheetP1 Inspection Types in Municity 5 Smartsheet
P1 Inspection Types in Municity 5 SmartsheetMatthewTHawley
 
DBA Fundamentals Group: Continuous SQL with Kafka and Flink
DBA Fundamentals Group: Continuous SQL with Kafka and FlinkDBA Fundamentals Group: Continuous SQL with Kafka and Flink
DBA Fundamentals Group: Continuous SQL with Kafka and FlinkTimothy Spann
 
sql ppt for students who preparing for sql
sql ppt for students who preparing for sqlsql ppt for students who preparing for sql
sql ppt for students who preparing for sqlbharatjanadharwarud
 
Essence of Requirements Engineering: Pragmatic Insights for 2024
Essence of Requirements Engineering: Pragmatic Insights for 2024Essence of Requirements Engineering: Pragmatic Insights for 2024
Essence of Requirements Engineering: Pragmatic Insights for 2024Asher Sterkin
 

Recently uploaded (20)

The Age of AI: Elevating Experiences & Delivering Customer Value!
The Age of AI: Elevating Experiences & Delivering Customer Value!The Age of AI: Elevating Experiences & Delivering Customer Value!
The Age of AI: Elevating Experiences & Delivering Customer Value!
 
Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)
 
maximum subarray ppt for killing camp students
maximum subarray ppt for killing camp studentsmaximum subarray ppt for killing camp students
maximum subarray ppt for killing camp students
 
Getting Started with Trello for Beginners.pptx
Getting Started with Trello for Beginners.pptxGetting Started with Trello for Beginners.pptx
Getting Started with Trello for Beginners.pptx
 
AI Product Management by Abhijit Bendigiri
AI Product Management by Abhijit BendigiriAI Product Management by Abhijit Bendigiri
AI Product Management by Abhijit Bendigiri
 
AUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdf
AUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdfAUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdf
AUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdf
 
OpenChain AI Study Group - North America and Europe - 2024-02-20
OpenChain AI Study Group - North America and Europe - 2024-02-20OpenChain AI Study Group - North America and Europe - 2024-02-20
OpenChain AI Study Group - North America and Europe - 2024-02-20
 
killing camp week 6 problem - maximal matrix.pdf
killing camp week 6 problem - maximal matrix.pdfkilling camp week 6 problem - maximal matrix.pdf
killing camp week 6 problem - maximal matrix.pdf
 
eLearning Content Development Company Code and Pixels.pdf
eLearning Content Development Company Code and Pixels.pdfeLearning Content Development Company Code and Pixels.pdf
eLearning Content Development Company Code and Pixels.pdf
 
"Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ...
"Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ..."Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ...
"Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ...
 
No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!
 
SPM 2024 – Overview of and benefits of AI in Product Management
SPM 2024 – Overview of and benefits of AI in Product ManagementSPM 2024 – Overview of and benefits of AI in Product Management
SPM 2024 – Overview of and benefits of AI in Product Management
 
Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...
Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...
Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...
 
killingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdfkillingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdf
 
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A..."Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...
 
Open Sprintera (Where Open Source Sparks a Sprint of Possibilities)
Open Sprintera (Where Open Source Sparks a Sprint of Possibilities)Open Sprintera (Where Open Source Sparks a Sprint of Possibilities)
Open Sprintera (Where Open Source Sparks a Sprint of Possibilities)
 
P1 Inspection Types in Municity 5 Smartsheet
P1 Inspection Types in Municity 5 SmartsheetP1 Inspection Types in Municity 5 Smartsheet
P1 Inspection Types in Municity 5 Smartsheet
 
DBA Fundamentals Group: Continuous SQL with Kafka and Flink
DBA Fundamentals Group: Continuous SQL with Kafka and FlinkDBA Fundamentals Group: Continuous SQL with Kafka and Flink
DBA Fundamentals Group: Continuous SQL with Kafka and Flink
 
sql ppt for students who preparing for sql
sql ppt for students who preparing for sqlsql ppt for students who preparing for sql
sql ppt for students who preparing for sql
 
Essence of Requirements Engineering: Pragmatic Insights for 2024
Essence of Requirements Engineering: Pragmatic Insights for 2024Essence of Requirements Engineering: Pragmatic Insights for 2024
Essence of Requirements Engineering: Pragmatic Insights for 2024
 

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.