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

New Challenges

And New Solutions

2010 / 2011

responsive design

Single page apps

js Evolution

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/

THE problem

The DOM

Document Object Model

Photo of a web developer manipulating the DOM

DOM                       vs.                   HTML

you don't like javascript?

Well, actually...

Javascript & THe DOM API

Toggle a class

youmightnotneedjquery.com

JQUERY

Toggle a class

Text

youmightnotneedjquery.com

A Gift and a Curse

State

The dom is a crummy

state container

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