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

•Download as PPTX, PDF•

0 likes•84 views

Vivek Tikar

We have discussed Redux, React-Redux and middleware in this meetup

Engineering

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

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

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Why Redux
itemList: [ {id: 1} , {id: 2} ]
Component-2
Component-1
Component-3
Display
Component

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Why Redux
Component-2
Component-1
Component-3
Display
Component
{id: 1}
{uid: 3}
{id: 2},itemList: [ {id: 1} , {id: 2} ]

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Why Redux
itemList: [ {id: 1} , {id: 2} , { uid: 3} ]
Component-2
Component-1
Component-3
Display
Component

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
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 ….

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Redux
Component-2
Component-1
Component-3
Display
Component
Store

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Store
• Store is nothing but simple
javaScript object which
holds application
state/data.
Store State

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
• What is store state.
• Single instance of store will be used throughout
application.

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Action

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
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

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Redux data
flow
25
Credits: Medium.com

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Demo ...
Vanilla Redux

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Any Questions

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
You might not need redux ...

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
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.

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Demo ...
React Redux

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Connect api code

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Cross Slice Reducer …

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Multiple stores

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Normalized Store

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Chrome Plugin
Demo ...

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Replace Reducer

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Hot reloading for faster
development

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Preloaded state

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Most Important, Interesting and
Easy part of Redux.

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Middleware
Credits: tenor.com

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Let's see how middleware works.
Syntax is available on docs as well.

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Component dispatches
action
Middleware 1 Middleware 2 Middleware 3
Reducer
Action
Action Action
Action

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Demo ...

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Thunk Middleware

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

React advance

Vivek Tikar

How to Avoid Common Mistakes at Scale: AWS Developer Workshop at Web Summit 2018 Avoid those pesky outages and dips in user engagement with a server of reliability and battle scars. Need to know why you can't have a million connections on a single server, why failing over never works the way you thought it would. What to do when your session management becomes a monolith in itself. Have you heard of the twitter fanout problem? Think you need shuffle sharding and hashmaps, but you aren't really sure why! Well this is the session for you, I will build out all of these examples and take you through how to solve these common problems, how to design for scale and what to do if you already have some of these challenges. Speaker: Shaun Ray - Manager, Evangelism, AWS

How to Avoid Common Mistakes at Scale: AWS Developer Workshop at Web Summit 2018

Amazon Web Services

Building Microservices with the Twelve-Factor App Pattern - SRV346 - Chicago ...

Amazon Web Services

Many organizations struggle to realize the promise of enterprise mobility despite big investments, in large part due to the long release cycle for apps and the difficulty of getting users to update. What if you could deliver a constant stream of incremental updates to your users automatically instead? In this session you’ll learn how microapps, which are single-purpose and cross-platform apps designed to support a single step in a user’s workflow, can ensure employees and business partners have a unified and secure way to access data and complete workflows. Microapps help enterprises easily develop native mobile apps and modernize their legacy systems by easily developing Mobile apps for their existing systems. Microapps is the fastest way to enterprise mobility and can dramatically reduce time to market and increase their employee productivity Visit for more details: https://eloha.io Blog: https://medium.com/eloha

Microapps: Redefining Enterprise Mobility

Nischal Reddy

Devoxx - Bug Wars: Episode IV - A New Hope

Mick McGuinness

Serverless + Evolutionary Architectures + Safe Deployments = Speed in the Rig...

Amazon Web Services

Learn how Cox Automotive started its journey with GitHub Enterprise. Hear how the company improved its processes around managing GitHub Enterprise on AWS and its plans to streamline operations even further in the future. Millions of developers and thousands of businesses rely on GitHub to collaborate on code and build better software faster. GitHub Enterprise is the self-hosted solution for businesses that you can deploy and manage in your own secure environment, and what better place to do that than on AWS. This session is brought to you by AWS partner, GitHub.

How Cox Automotive Runs GitHub Enterprise on AWS (ENT356-S) - AWS re:Invent 2018

Amazon Web Services

APIdays Paris 2018 - The State of the API Industry Paolo Malinverno, VP Resea...

apidays

Perth APAC Groundbreakers tour - The Autonomous Database

Connor McDonald

Come see examples of how Bebo uses Amazon SageMaker to power massive Fortnite tournaments every week. Traditional sports require referees, scorekeepers, field staff, and broadcast crews for every match. But esports are digital by nature. In this session, learn how machine learning and computer vision are enabling esports to occur at a massive scale. Learn how Bebo developed a model that can detect every victory and elimination, and can even prevent cheating on their tournament platform.

Machine Learning Your Eight-Year-Old Would Be Proud Of (AIM390) - AWS re:Inve...

Amazon Web Services

SageMaker로 강화학습(RL) 마스터링 :: 남궁선 - AWS Community Day 2019

AWSKRUG - AWS한국사용자모임

In this hands-on workshop, you learn best practices and architectural patterns for building streaming data processing pipelines without servers. Using Amazon Kinesis, AWS Lambda, and other services, you have the opportunity to build, deploy, and monitor an application to ingest and process high-velocity data at scale. This advanced workshop assumes that you have experience writing Lambda functions and understand the basics of the AWS serverless platform, so come ready to dive into the deep end. Bring your laptop with a full keyboard. We provide a sandbox AWS account for you to use during the workshop.

Advanced Serverless Data Processing (GPSWS406) - AWS re:Invent 2018

Amazon Web Services

IoT Microcontrollers and Getting Started with Amazon FreeRTOS (IOT338-R1) - A...

Amazon Web Services

Ensuring Project Success with SpiraTeam and Rapise from Inflectra pta - short

Adam Sandman

Are you a developer, operator, or business stakeholder who is banging your head against the wall because you cannot seem to deliver apps that make everyone happy? Have you thrown more tools, containers, or agile methods at this challenge than you can count? Have you tried adopting this thing called "DevOps" for your app delivery problems but still cannot fix your IT mayhem? Then this session is for you. Learn how putting people and process first can pave the way to use the cloud for modern application delivery. With AWS and Red Hat, developers and IT operations have a optimal platform and cloud environment for developing, deploying, and managing traditional and cloud-native applications with a streamlined DevOps process to end the headbanging.

Modern Application Delivery on AWS: the Red Hat Way

Amazon Web Services

IoT deployments often consist of thousands to millions of devices deployed across multiple locations. It is essential to have a solution to track, monitor, and manage your connected device fleets at scale. In this session, learn how AWS IoT Device Management can help you onboard, remotely manage, and monitor your connected devices. In this session, we discuss key features of AWS IoT Device Management, including fleet indexing and search, remote commands, over-the-air (OTA) updates, and device monitoring. Learn how AWS IoT Device Management can help you scale your fleets and reduce the cost and effort of managing IoT device deployments. Also, representatives from Hudl, the world leader in sports video analysis, discuss how the company is changing the recording and upload process for high schools across the country with their newest product, Hudl Focus.

Managing Connected Devices at Scale with AWS IoT Device Management, ft. Hudl ...

Amazon Web Services

A successful transition to a modern elastic, containerized, microservice architecture requires automating all things, including your monitoring and alerting infrastructure. In this talk, we share some of the techniques and best practices we learned at New Relic for applying "infrastructure as code" (IaC) techniques to monitoring and alerting during our 10-year journey from a single-region monolithic application to a global multi-region deployment of hundreds of microservices. This session is brought to you by AWS partner, New Relic.

Best Practices for Scalable Monitoring (ENT310-S) - AWS re:Invent 2018

Amazon Web Services

Websites go Serverless | AWS Floor28

Amazon Web Services

Websites go Serverless - Floor28

Boaz Ziniman

APIに関するセッション資料

CData Software Japan

Similar to Redux JavaScript Meetup - Talentica, Saturday, July 6, 2019 (20)

React advance

How to Avoid Common Mistakes at Scale: AWS Developer Workshop at Web Summit 2018

Building Microservices with the Twelve-Factor App Pattern - SRV346 - Chicago ...

Microapps: Redefining Enterprise Mobility

Devoxx - Bug Wars: Episode IV - A New Hope

Serverless + Evolutionary Architectures + Safe Deployments = Speed in the Rig...

How Cox Automotive Runs GitHub Enterprise on AWS (ENT356-S) - AWS re:Invent 2018

APIdays Paris 2018 - The State of the API Industry Paolo Malinverno, VP Resea...

Perth APAC Groundbreakers tour - The Autonomous Database

Machine Learning Your Eight-Year-Old Would Be Proud Of (AIM390) - AWS re:Inve...

SageMaker로 강화학습(RL) 마스터링 :: 남궁선 - AWS Community Day 2019

Advanced Serverless Data Processing (GPSWS406) - AWS re:Invent 2018

IoT Microcontrollers and Getting Started with Amazon FreeRTOS (IOT338-R1) - A...

Ensuring Project Success with SpiraTeam and Rapise from Inflectra pta - short

Modern Application Delivery on AWS: the Red Hat Way

Managing Connected Devices at Scale with AWS IoT Device Management, ft. Hudl ...

Best Practices for Scalable Monitoring (ENT310-S) - AWS re:Invent 2018

Websites go Serverless | AWS Floor28

Websites go Serverless - Floor28

APIに関するセッション資料

Recently uploaded

S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx

SCMS School of Architecture

HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx

SCMS School of Architecture

GAS POWER CYCLES Cycles: Otto, Diesel, Dual, Brayton - Calculation of mean effective pressure - Air standard efficiency - Comparison of cycles INTERNAL COMBUSTION ENGINES Classification - Components and their function - valve timing diagram and port timing diagram - actual and theoretical p-v diagram of two stroke and four stroke engines – carburettor - diesel pump and injector system - battery and magneto ignition system - principles of combustion and detonation in CI engines - lubrication and cooling systems - performance parameters and calculations.

Thermal Engineering Unit - I & II . ppt

DineshKumar4165

Model Call Girl Services in Delhi reach out to us at 🔝 9953056974🔝✔️✔️ Our agency presents a selection of young, charming call girls available for bookings at Oyo Hotels. Experience high-class escort services at pocket-friendly rates, with our female escorts exuding both beauty and a delightful personality, ready to meet your desires. Whether it's Housewives, College girls, Russian girls, Muslim girls, or any other preference, we offer a diverse range of options to cater to your tastes. We provide both in- call and out-call services for your convenience. Our in-call location in Delhi ensures cleanliness, hygiene, and 100% safety, while our out-call services offer doorstep delivery for added ease. We value your time and money, hence we kindly request pic collectors, time-passers, and bargain hunters to refrain from contacting us. Our services feature various packages at competitive rates: One shot: ₹2000/in-call, ₹5000/out-call Two shots with one girl: ₹3500 /in-call, ₱6000/out-call Body to body massage with sex: ₱3000/in-call Full night for one person: ₱7000/in-call, ₱10000/out-call Full night for more than 1 person : Contact us at 🔝 9953056974🔝. for details Operating 24/7, we serve various locations in Delhi, including Green Park, Lajpat Nagar, Saket, and Hauz Khas near metro stations. For premium call girl services in Delhi 🔝 9953056974🔝. Thank you for considering us

Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7

9953056974 Low Rate Call Girls In Saket, Delhi NCR

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

ssuser89054b

Computer Graphics Introduction To Curves

ChandrakantDivate1

Theory of Time 2024 (Universal Theory for Everything)

Ramkumar k

Orlando’s Arnold Palmer Hospital Layout Strategy-1.pptx

MuhammadAsimMuhammad6

Education system forms the backbone of every nation. And hence it is important to provide a strong educational foundation to the young generation to ensure the development of open-minded global citizens securing the future for everyone. Advanced technology available today can play a crucial role in streamlining education-related processes to promote solidarity among students, teachers and the school staff. School Management System(SMS) consists of tasks such as registering students, attendance record keeping to control absentees, producing report cards, producing official transcript, preparing timetable and producing different reports for teachers, officials from Dr.Mohiuddin Education foundation and other stakeholders. Automation is the utilization of technology to replace human with a machine that can perform more quickly and more continuously. By automating SMS documents that took up many large storage rooms can be stored on few disks. Transcript images can be annotate. It reduces the time to retrieve old transcripts from hours to seconds.

School management system project Report.pdf

Kamal Acharya

Employee leave management system project.

Kamal Acharya

Design For Accessibility: Getting it right from the start

Quintin Balsdon

The purpose of Integrated Test Rig is to assess performance of Fuel Cooled Oil Cooler (FCOC), HP Pump & Oil Pump prior to fitment on Aero Engine. The design of rig is such that it can cater to individual testing of individual LRU or integrated testing of all the LRU’s installed together (in combination). The pumps under test shall be mounted directly on the high-speed electric motor flange through adapter quill shaft assembly. Variable speed drives shall be provided for all the pumps under testing. The rig shall cater for real time monitoring and recording of performance parameters. KEY FEATURES Key features of this Rig are as follows: - 1. It has separate power packs for both the fluids i.e. ATF Power pack for ATF Fluid, OX Power Pack for OX-27 Oil. 2. This Rig is designed for high temperature Application. It works on 200 deg. Celsius. 3. Two Dedicated heating systems have been integrated with this Rig to raise the temperature of OX-27 Oil. 4. In both Power Packs insulated tanks are being used, which is good for safe operation and safety of operator. 5. This rig is designed in such a way, that it’s OX power pack is in its left side, ATF Power pack is in right Side and test bed is in Centre. 6. A big Test bed have been provided for smooth testing of UUT’s. 7. All piping is being insulated for safe operation and maintenance. 8. It comprises with DAQ System. 9. This rig can test several components at a time, together or separately. Application All the UUT’s are mounted on HTFE-25 Engine after successful performance testing of those. Application of this Rig are as follows: - 1. One of its application is to test LP Pump of HTFE-25. It is designed for functional testing of LP Pump. a. Free Flow Test b. Load Test 2. It is used to test HP Pump of HTFE-25. It is designed for functional testing of HP Pump. a. Free Flow Test b. Load Test 3. It is used to test Oil Pump of HTFE-25. It is designed for functional testing of Oil Pump. 4. It is used to test FCOC of HTFE-25.

Integrated Test Rig For HTFE-25 - Neometrix

Neometrix_Engineering_Pvt_Ltd

DeepFakes presentation : brief idea of DeepFakes

MayuraD1

STEAM NOZZLES AND TURBINES Flow of steam through nozzles, shapes of nozzles, effect of friction, critical pressure ratio, supersaturated flow - impulse and reaction principles, velocity diagram, work done and efficiency – types of compounding - governors. AIR COMPRESSORS Classification - working principle - type of compressors, work of compression with and without clearance - volumetric efficiency - isothermal and isentropic efficiency of reciprocating compressors - multistage air compressor with inter cooling.

Thermal Engineering -unit - III & IV.ppt

DineshKumar4165

1_Introduction + EAM Vocabulary + how to navigate in EAM.pdf

AldoGarca30

NO1 Top No1 Amil Baba In Azad Kashmir, Kashmir Black Magic Specialist Expert ...

Amil baba

Double Revolving field theory-how the rotor develops torque

BhangaleSonal

fitting shop and tools used in fitting shop .ppt

AfnanAhmad53

Linux Systems Programming: Inter Process Communication (IPC) using Pipes

RashidFaridChishti

Ground Improvement Technique: Earth Reinforcement

Dr. Deepak Mudgal

Recently uploaded (20)

S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx

HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx

Thermal Engineering Unit - I & II . ppt

Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Computer Graphics Introduction To Curves

Theory of Time 2024 (Universal Theory for Everything)

Orlando’s Arnold Palmer Hospital Layout Strategy-1.pptx

School management system project Report.pdf

Employee leave management system project.

Design For Accessibility: Getting it right from the start

Integrated Test Rig For HTFE-25 - Neometrix

DeepFakes presentation : brief idea of DeepFakes

Thermal Engineering -unit - III & IV.ppt

1_Introduction + EAM Vocabulary + how to navigate in EAM.pdf

NO1 Top No1 Amil Baba In Azad Kashmir, Kashmir Black Magic Specialist Expert ...

Double Revolving field theory-how the rotor develops torque

fitting shop and tools used in fitting shop .ppt

Linux Systems Programming: Inter Process Communication (IPC) using Pipes

Ground Improvement Technique: Earth Reinforcement

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

2. 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

3. 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 {id: 1} Parent Component State Child Components

4. Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights Why Redux itemList: [ {id: 1} ] Component-2 Component-1 Component-3 Display Component Parent Component State

5. Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights Why Redux itemList: [ {id: 1} ] Component-2 Component-1 Component-3 Display Component {id: 2}

6. Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights Why Redux itemList: [ {id: 1} , {id: 2} ] Component-2 Component-1 Component-3 Display Component

7. Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights Why Redux Component-2 Component-1 Component-3 Display Component {id: 1} {uid: 3} {id: 2},itemList: [ {id: 1} , {id: 2} ]

8. Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights Why Redux itemList: [ {id: 1} , {id: 2} , { uid: 3} ] Component-2 Component-1 Component-3 Display Component

9. Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights Why Redux Component-2 Component-1 Component-3 Display Component {id: 1} {id: 2} , { uid: 3}itemList: [ {id: 1} , {id: 2} , { uid: 3} ]

10. Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights Why Redux Component-2 Component-1 Component-3 Display Component itemList: [ {id: 1} , {id: 2} , { uid: 3} ]

11. Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights 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 ….

13. Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights Store • Store is nothing but simple javaScript object which holds application state/data. Store State

14. Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights • What is store state. • Single instance of store will be used throughout application.

19. Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights Redux Component-2 Component-1 Component-3 Display Component Store's state-1 Action1 Store's state1 Action1

20. Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights Redux Component-2 Component-1 Component-3 Display Component Store state-1 Action2 Store's state1 Action1

21. Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights Redux Component-2 Component-1 Component-3 Display Component Store's state-2 Action2 Store's state1 Action1 Store's state2 Action2

22. Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights Redux Component-2 Component-1 Component-3 Display Component Store's state-2 Action3 Store's state1 Action1 Store's state2 Action2

23. Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights 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

24. Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights 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

29. Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights 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.

46. Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights Component dispatches action Middleware 1 Middleware 2 Middleware 3 Reducer Action Action Action Action

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

Recommended

Recommended

More Related Content

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

Similar to Redux JavaScript Meetup - Talentica, Saturday, July 6, 2019 (20)

Recently uploaded

Recently uploaded (20)

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