Managing State in Frontend WebApps With Redux
Who's this guy
George Spake
IT Analyst at Web Services UTHSC
Passionate Programmer
Open Source Software Tech Community Evangelist
Memphis User Group Organizer / Speaker
Crummy Banjo Player
Twitter: @georgespake
Github: gpspake
georgespake.com
The State (heh) Of the web
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/3648703/191f962bc8ca3098ba44c05eda04734d74f47d7f4661f7db8c42f9bb781c4c9e.jpg)
New Challenges
And New Solutions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/3648590/feature-bundle-6-4.png)
2010 / 2011
responsive design
Single page apps
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/3648643/backbone.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/3648647/Meteor-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/3648649/react_best_practices-1453211146748.png)
js Evolution
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/3648695/Unofficial_JavaScript_logo_2.svg.png)
React & redux
React
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
https://facebook.github.io/react/
Redux
A predictable state container for JavaScript apps
http://redux.js.org/
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/3648809/logo.png)
THE problem
The DOM
Document Object Model
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/3648867/dom.jpg)
Photo of a web developer manipulating the DOM
DOM vs. HTML
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/3649049/Screen_Shot_2017-03-29_at_4.37.07_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/3649051/Untitled-2.jpg)
you don't like javascript?
Well, actually...
Javascript & THe DOM API
Toggle a class
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/3652477/Screen_Shot_2017-03-30_at_10.59.12_AM.png)
youmightnotneedjquery.com
JQUERY
Toggle a class
Text
youmightnotneedjquery.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/3652499/Screen_Shot_2017-03-30_at_10.59.17_AM.png)
A Gift and a Curse
State
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/3652523/state-TN.png)
The dom is a crummy
state container
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/3652542/Screen_Shot_2017-03-30_at_11.16.23_AM.png)
The Solution
Redux
egghead.io/courses/getting-started-with-redux
Redux
Three Principles
Single SOURCE OF TRUTH
STATE IS READ ONLY
Changes are made with pure functions
http://redux.js.org/docs/introduction/ThreePrinciples.html
Technical debt
vs
Technical Investment
DEMO
github.com/gpspake/laravel-api-demo-client
github.com/gpspake/redux-raffle
Wanna actually Learn this stuff?
Slides and notes
georgespake.com/blog/state-react-redux
Managing state in frontend webapps with redux
By gpspake
Managing state in frontend webapps with redux
- 2,121