better react state management with redux
TRANSCRIPT
Better React state management with ReduxMaurice de Beijer@mauricedb@react_tutorial
© ABL - The Problem Solver 2
Workshop goal
Short recap: what is React? Learn the three principals of Redux Use the different Redux components Unit testing Redux code Adding Redux to a React application Use Redux middleware
3
Maurice de Beijer The Problem Solver Microsoft Azure MVP Freelance developer/instructor Twitter: @mauricedb and @React_Tutorial Web: http://www.TheProblemSolver.nl E-mail: [email protected]
© ABL - The Problem Solver 4
Follow along
Git repository: https://github.com/mauricedb/nitflex-redux
Slides: http://bit.ly/react-redux-workshop
© ABL - The Problem Solver 5
Type it outby hand?
“Typing it drills it into your brain much better than
simply copying and pasting it. You're forming new neuron pathways. Those pathways are going to help you in the future. Help them out now!”
© ABL - The Problem Solver 6
PrerequisitesInstall Node & NPM
© ABL - The Problem Solver 8
Short recapWhat is React?
© ABL - The Problem Solver 9
React“React is a JavaScript library for building user interfaces”
- Facebook -
© ABL - The Problem Solver 10
React features
React uses a component based architecture
Components are written using the JSX syntax
React likes a one way data flow React uses a virtual DOM
© ABL - The Problem Solver 11
React Componen
t
© ABL - The Problem Solver 12
NitflexThe sample application
© ABL - The Problem Solver 13
Nitflex
© ABL - The Problem Solver 14
Main componen
ts
Application
Login Main Page
Header Billboard Genre List
Genre*
Movie* Expanded Movie
Playing Movie
© ABL - The Problem Solver 15
Stateful componen
ts
Application
Login Main Page
Header Billboard Genre List
Genre*
Movie* Expanded Movie
Playing Movie
© ABL - The Problem Solver 16
Clone Nitflex
&NPM install
© ABL - The Problem Solver 17
Redux
© ABL - The Problem Solver 18
Redux
“Redux is a predictable state container for JavaScript
apps”
- Dan Abramov -
© ABL - The Problem Solver 19
Three principals of Redux
Single source of truth State is read-only Changes are made with pure functions
© ABL - The Problem Solver 20
Single source of
truth
The application state is stored in a single location
Do not scatter the state over lots of components
A single state location makes it easier to reason about and debug your application
© ABL - The Problem Solver 21
State isread-only
The state objects are never changed by the application
Every state change is the result of an action being dispatched to the store
This action describes the intended state change
© ABL - The Problem Solver 22
Changes with pure functions
Reducers are pure functions that take the current state and an action as input and return a new state object
The previous state object is never modified
© ABL - The Problem Solver 23
UI versus App state
Redux should be used for application state.
Do not store UI state in Redux!
© ABL - The Problem Solver 24
Login example
© ABL - The Problem Solver 25
InstallingRedux
© ABL - The Problem Solver 26
Redux Components
© ABL - The Problem Solver 27
Redux Componen
ts
Actions Reducers The store
© ABL - The Problem Solver 28
Loginaction
© ABL - The Problem Solver 29
Login reducer
© ABL - The Problem Solver 30
combineReducers
© ABL - The Problem Solver 31
Unit testing
© ABL - The Problem Solver 32
Unit test the action
creator
© ABL - The Problem Solver 33
Unit test the
reducer
© ABL - The Problem Solver 34
Redux and React
© ABL - The Problem Solver 35
Redux and React
The NPM react-redux package contains the React bindings for Redux
The <Provider> component makes the Redux store available
The connect() function connects React components to the Redux store use in <Provider>
© ABL - The Problem Solver 36
Create store
© ABL - The Problem Solver 37
Dispatch login
action
© ABL - The Problem Solver 38
Get the user from the store
© ABL - The Problem Solver 39
Cleanup app-container.jsx
Remove user and loginAsUser() app-presentation.jsx
Remove loginAsUser()
© ABL - The Problem Solver 40
Redux Middleware
© ABL - The Problem Solver 41
Redux Middlewar
e
“Redux middleware provides a third-party extension point
between dispatching an action, and the moment it
reaches the reducer”
- Dan Abramov -
© ABL - The Problem Solver 42
Installing redux-thunk
© ABL - The Problem Solver 43
Redux-Thunk
© ABL - The Problem Solver 44
What is a Thunk?
“A thunk is a subroutine that is created, often
automatically, to assist a call to another subroutine”
- Wikipedia -
© ABL - The Problem Solver 45
Configure Thunk
Middleware
© ABL - The Problem Solver 46
Update the
Actions
© ABL - The Problem Solver 47
Add movies reducer
© ABL - The Problem Solver 48
Update the
reducers index.js
© ABL - The Problem Solver 49
Extract movies from store
© ABL - The Problem Solver 50
Cleanup app-container.jsx
Remove allMovies and passing movies to AppPresentation
© ABL - The Problem Solver 51
Redux DevTools
© ABL - The Problem Solver 52
Redux DevTools
© ABL - The Problem Solver 53
Redux DevTools
© ABL - The Problem Solver 54
Remember the user
© ABL - The Problem Solver 55
Remember the user
© ABL - The Problem Solver 56
Playing and stopping movies
© ABL - The Problem Solver 57
Add actions
© ABL - The Problem Solver 58
Update reducer
© ABL - The Problem Solver 59
Startplaying
© ABL - The Problem Solver 60
Retrieve the
playing movie
from the store in
app-presentati
on
© ABL - The Problem Solver 61
Retrieve the
playing movie
from the store in playing-movie
© ABL - The Problem Solver 62
Cleanup app-container.jsx main-page/index.jsx genre-list.jsx genre-row.jsx
© ABL - The Problem Solver 63
Filtering movies
© ABL - The Problem Solver 64
Filtering movies
The list of filtered movies are derived from state
© ABL - The Problem Solver 65
Add action
© ABL - The Problem Solver 66
Reducer
© ABL - The Problem Solver 67
Filter-movies.jsx
© ABL - The Problem Solver 68
App-presentati
on.jsx
© ABL - The Problem Solver 69
Cleanup Header.jsx
Remove filterMovies Main-page/index.jsx
Remove filterMovies
© ABL - The Problem Solver 70
Removeapp-container
The AppContainer is no longer needed.
© ABL - The Problem Solver 71
Index.js
© ABL - The Problem Solver 72
Connect only to required movie data
© ABL - The Problem Solver 73
Main-page
© ABL - The Problem Solver 74
Genre-list
© ABL - The Problem Solver 75
Billboard
© ABL - The Problem Solver 76
App-presentatio
n
© ABL - The Problem Solver 77
Bonus Exercises
Extract updating localStorage from user reducer and do this with middleware
The user is passed from AppPresentation => MainPage => Header
© ABL - The Problem Solver 78
Maurice de Beijer
@mauricedb