SlideShare a Scribd company logo
1 of 14
Redux With React Native
React Camp 2016 @ United Nations
github.com/urbanvikingr
Redux
Redux
Single source of truth
State is read-only
Changes are made with
pure functions
3 Principles
Redux
Store
Reducer
Action
Container
Component
Basics
Redux
Store
Redux
Reducer
Redux
Action
Redux
Container
Redux
Component
Redux
Thunk
Logger
SelectorAdvanced
s
https://github.com/urbanvikingr/todos-react-native-redux
Q & A
Flow
Flow
Static Type Checker

More Related Content

What's hot

GitHub Actions demo with mabl
GitHub Actions demo with mablGitHub Actions demo with mabl
GitHub Actions demo with mablBertold Kolics
 
Introducing GitLab (September 2018)
Introducing GitLab (September 2018)Introducing GitLab (September 2018)
Introducing GitLab (September 2018)Noa Harel
 
GitHub Actions with Node.js
GitHub Actions with Node.jsGitHub Actions with Node.js
GitHub Actions with Node.jsStefan Stölzle
 
GitOps and Kubernetes: a radical idea
GitOps and Kubernetes: a radical ideaGitOps and Kubernetes: a radical idea
GitOps and Kubernetes: a radical ideaManning Publications
 
Go reactive - Manuel Vicente Vivo
Go reactive - Manuel Vicente VivoGo reactive - Manuel Vicente Vivo
Go reactive - Manuel Vicente VivoManuel Vicente Vivo
 
Thomson Reuters, TMS: Workflow in GitLab
Thomson Reuters, TMS: Workflow in GitLabThomson Reuters, TMS: Workflow in GitLab
Thomson Reuters, TMS: Workflow in GitLabMatan Keidar
 
DevOps with GitHub Actions
DevOps with GitHub ActionsDevOps with GitHub Actions
DevOps with GitHub ActionsNilesh Gule
 
Using Web Software Architecture in Traditional Desktop App Development
Using Web Software Architecture in Traditional Desktop App DevelopmentUsing Web Software Architecture in Traditional Desktop App Development
Using Web Software Architecture in Traditional Desktop App DevelopmentBen Lau
 
GraphQL over REST at Reactathon 2018
GraphQL over REST at Reactathon 2018GraphQL over REST at Reactathon 2018
GraphQL over REST at Reactathon 2018Sashko Stubailo
 
Flex and .NET Integration
Flex and .NET IntegrationFlex and .NET Integration
Flex and .NET Integrationicaraion
 
Gitlab meets Kubernetes
Gitlab meets KubernetesGitlab meets Kubernetes
Gitlab meets Kubernetesinovex GmbH
 
Introducing GitLab (June 2018)
Introducing GitLab (June 2018)Introducing GitLab (June 2018)
Introducing GitLab (June 2018)Noa Harel
 
Git and GitGHub Basics
Git and GitGHub BasicsGit and GitGHub Basics
Git and GitGHub BasicsAswin Barath
 
Release engineering at Eclipse
Release engineering at EclipseRelease engineering at Eclipse
Release engineering at EclipseSravan Lakkimsetti
 

What's hot (20)

Introducing GitLab
Introducing GitLabIntroducing GitLab
Introducing GitLab
 
GitHub Actions demo with mabl
GitHub Actions demo with mablGitHub Actions demo with mabl
GitHub Actions demo with mabl
 
Introducing GitLab (September 2018)
Introducing GitLab (September 2018)Introducing GitLab (September 2018)
Introducing GitLab (September 2018)
 
CI/CD with GitHub Actions
CI/CD with GitHub ActionsCI/CD with GitHub Actions
CI/CD with GitHub Actions
 
GitHub Actions with Node.js
GitHub Actions with Node.jsGitHub Actions with Node.js
GitHub Actions with Node.js
 
GitOps and Kubernetes: a radical idea
GitOps and Kubernetes: a radical ideaGitOps and Kubernetes: a radical idea
GitOps and Kubernetes: a radical idea
 
Github copilot
Github copilotGithub copilot
Github copilot
 
Overview of git
Overview of gitOverview of git
Overview of git
 
Go reactive - Manuel Vicente Vivo
Go reactive - Manuel Vicente VivoGo reactive - Manuel Vicente Vivo
Go reactive - Manuel Vicente Vivo
 
Github
GithubGithub
Github
 
Thomson Reuters, TMS: Workflow in GitLab
Thomson Reuters, TMS: Workflow in GitLabThomson Reuters, TMS: Workflow in GitLab
Thomson Reuters, TMS: Workflow in GitLab
 
DevOps with GitHub Actions
DevOps with GitHub ActionsDevOps with GitHub Actions
DevOps with GitHub Actions
 
Using Web Software Architecture in Traditional Desktop App Development
Using Web Software Architecture in Traditional Desktop App DevelopmentUsing Web Software Architecture in Traditional Desktop App Development
Using Web Software Architecture in Traditional Desktop App Development
 
GraphQL over REST at Reactathon 2018
GraphQL over REST at Reactathon 2018GraphQL over REST at Reactathon 2018
GraphQL over REST at Reactathon 2018
 
Flex and .NET Integration
Flex and .NET IntegrationFlex and .NET Integration
Flex and .NET Integration
 
Gitlab meets Kubernetes
Gitlab meets KubernetesGitlab meets Kubernetes
Gitlab meets Kubernetes
 
Introducing GitLab (June 2018)
Introducing GitLab (June 2018)Introducing GitLab (June 2018)
Introducing GitLab (June 2018)
 
Git and GitGHub Basics
Git and GitGHub BasicsGit and GitGHub Basics
Git and GitGHub Basics
 
Release engineering at Eclipse
Release engineering at EclipseRelease engineering at Eclipse
Release engineering at Eclipse
 
Git overview
Git overviewGit overview
Git overview
 

Viewers also liked

Introduction to React Native & Redux
Introduction to React Native & ReduxIntroduction to React Native & Redux
Introduction to React Native & ReduxBarak Cohen
 
Xebicon2016 - React Native & Redux
Xebicon2016 - React Native & ReduxXebicon2016 - React Native & Redux
Xebicon2016 - React Native & Reduxpgdejardin
 
XebiCon'16 : React Native et Redux, une complémentarité hors du commun. Par ...
XebiCon'16 : React Native et Redux, une complémentarité hors du commun.  Par ...XebiCon'16 : React Native et Redux, une complémentarité hors du commun.  Par ...
XebiCon'16 : React Native et Redux, une complémentarité hors du commun. Par ...Publicis Sapient Engineering
 
Pieter De Baets - An introduction to React Native
Pieter De Baets - An introduction to React NativePieter De Baets - An introduction to React Native
Pieter De Baets - An introduction to React Nativetlv-ios-dev
 
React + Redux + TypeScript === ♥
React + Redux + TypeScript === ♥React + Redux + TypeScript === ♥
React + Redux + TypeScript === ♥Remo Jansen
 
React native redux_sharing
React native redux_sharingReact native redux_sharing
React native redux_sharingSam Lee
 
Redux data flow with angular 2
Redux data flow with angular 2Redux data flow with angular 2
Redux data flow with angular 2Gil Fink
 
Ionic으로 모바일앱 만들기 #2
Ionic으로 모바일앱 만들기 #2Ionic으로 모바일앱 만들기 #2
Ionic으로 모바일앱 만들기 #2성일 한
 
Ionic으로 모바일앱 만들기 #1
Ionic으로 모바일앱 만들기 #1Ionic으로 모바일앱 만들기 #1
Ionic으로 모바일앱 만들기 #1성일 한
 
React in Native Apps - Meetup React - 20150409
React in Native Apps - Meetup React - 20150409React in Native Apps - Meetup React - 20150409
React in Native Apps - Meetup React - 20150409Minko3D
 
React Native를 사용한
 초간단 커뮤니티 앱 제작
React Native를 사용한
 초간단 커뮤니티 앱 제작React Native를 사용한
 초간단 커뮤니티 앱 제작
React Native를 사용한
 초간단 커뮤니티 앱 제작Taegon Kim
 
React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux IntroductionNikolaus Graf
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Kim Hunmin
 
React JS and why it's awesome
React JS and why it's awesomeReact JS and why it's awesome
React JS and why it's awesomeAndrew Hull
 

Viewers also liked (19)

Introduction to React Native & Redux
Introduction to React Native & ReduxIntroduction to React Native & Redux
Introduction to React Native & Redux
 
React Redux React Native
React Redux React NativeReact Redux React Native
React Redux React Native
 
Ti cs
Ti csTi cs
Ti cs
 
Xebicon2016 - React Native & Redux
Xebicon2016 - React Native & ReduxXebicon2016 - React Native & Redux
Xebicon2016 - React Native & Redux
 
Presentation1
Presentation1Presentation1
Presentation1
 
XebiCon'16 : React Native et Redux, une complémentarité hors du commun. Par ...
XebiCon'16 : React Native et Redux, une complémentarité hors du commun.  Par ...XebiCon'16 : React Native et Redux, une complémentarité hors du commun.  Par ...
XebiCon'16 : React Native et Redux, une complémentarité hors du commun. Par ...
 
Pieter De Baets - An introduction to React Native
Pieter De Baets - An introduction to React NativePieter De Baets - An introduction to React Native
Pieter De Baets - An introduction to React Native
 
React + Redux + TypeScript === ♥
React + Redux + TypeScript === ♥React + Redux + TypeScript === ♥
React + Redux + TypeScript === ♥
 
Let's Redux!
Let's Redux!Let's Redux!
Let's Redux!
 
React native redux_sharing
React native redux_sharingReact native redux_sharing
React native redux_sharing
 
Redux data flow with angular 2
Redux data flow with angular 2Redux data flow with angular 2
Redux data flow with angular 2
 
Ionic으로 모바일앱 만들기 #2
Ionic으로 모바일앱 만들기 #2Ionic으로 모바일앱 만들기 #2
Ionic으로 모바일앱 만들기 #2
 
Ionic으로 모바일앱 만들기 #1
Ionic으로 모바일앱 만들기 #1Ionic으로 모바일앱 만들기 #1
Ionic으로 모바일앱 만들기 #1
 
React in Native Apps - Meetup React - 20150409
React in Native Apps - Meetup React - 20150409React in Native Apps - Meetup React - 20150409
React in Native Apps - Meetup React - 20150409
 
React Native를 사용한
 초간단 커뮤니티 앱 제작
React Native를 사용한
 초간단 커뮤니티 앱 제작React Native를 사용한
 초간단 커뮤니티 앱 제작
React Native를 사용한
 초간단 커뮤니티 앱 제작
 
React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux Introduction
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까?
 
React JS and why it's awesome
React JS and why it's awesomeReact JS and why it's awesome
React JS and why it's awesome
 
Introduction to Redux
Introduction to ReduxIntroduction to Redux
Introduction to Redux
 

Recently uploaded

How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 

Recently uploaded (20)

How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 

Redux with React Native

Editor's Notes

  1. Get a feeling of how many in audience are familiar with Redux, React, React Native, Flux Credit: Dan Abramov, creator of Redux 30 free videos on egghead.io by Dan Abramov: https://egghead.io/series/getting-started-with-redux The official Redux documentation: http://redux.js.org/index.html
  2. Show examples of makeReducer, makeAction to minimize boilerplate
  3. Walk through the code example, starting with user event `add todo`, then action, reducer, container and last component