Better React state management with Redux

Better React state management with Redux
Better React state management with Redux Maurice de Beijer @mauricedb @react_tutorial
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 © ABL - The Problem Solver 2
 Maurice de Beijer  The Problem Solver  Microsoft Azure MVP  Freelance developer/instructor  Twitter: @mauricedb and @React_Tutorial  Web: http://www.TheProblemSolver.nl  E-mail: maurice.de.beijer@gmail.com 3
Follow along  Git repository: https://github.com/mauricedb/nitflex-redux  Slides: http://bit.ly/react-redux-workshop © ABL - The Problem Solver 4
Type it out by hand? © ABL - The Problem Solver 5 “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!”
Prerequisites Install Node & NPM © ABL - The Problem Solver 6
Install Node.js & NPM © ABL - The Problem Solver 7
Short recap What is React? © ABL - The Problem Solver 8
React © ABL - The Problem Solver 9 “React is a JavaScript library for building user interfaces” - Facebook -
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 10
React Component © ABL - The Problem Solver 11
Nitflex The sample application © ABL - The Problem Solver 12
Nitflex © ABL - The Problem Solver 13
Main components © ABL - The Problem Solver 14 Application Login Main Page Header Billboard Genre List Genre* Movie* Expanded Movie Playing Movie
Stateful components © ABL - The Problem Solver 15 Application Login Main Page Header Billboard Genre List Genre* Movie* Expanded Movie Playing Movie
Clone Nitflex & NPM install © ABL - The Problem Solver 16
Redux © ABL - The Problem Solver 17
Redux © ABL - The Problem Solver 18 “Redux is a predictable state container for JavaScript apps” - Dan Abramov -
Three principals of Redux  Single source of truth  State is read-only  Changes are made with pure functions © ABL - The Problem Solver 19
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 20
State is read-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 21
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 22
UI versus App state  Redux should be used for application state.  Do not store UI state in Redux! © ABL - The Problem Solver 23
Login example © ABL - The Problem Solver 24
Installing Redux © ABL - The Problem Solver 25
ReduxComponents © ABL - The Problem Solver 26
Redux Components  Actions  Reducers  The store © ABL - The Problem Solver 27
Login action © ABL - The Problem Solver 28
Login reducer © ABL - The Problem Solver 29
combineReducers © ABL - The Problem Solver 30
Unit testing © ABL - The Problem Solver 31
Unit test the action creator © ABL - The Problem Solver 32
Unit test the reducer © ABL - The Problem Solver 33
Redux and React © ABL - The Problem Solver 34
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 35
Create store © ABL - The Problem Solver 36
Dispatch login action © ABL - The Problem Solver 37
Get the user from the store © ABL - The Problem Solver 38
Cleanup  app-container.jsx  Remove user and loginAsUser()  app-presentation.jsx  Remove loginAsUser() © ABL - The Problem Solver 39
Redux Middleware © ABL - The Problem Solver 40
Redux Middleware © ABL - The Problem Solver 41 “Redux middleware provides a third-party extension point between dispatching an action, and the moment it reaches the reducer” - Dan Abramov -
Installing redux-thunk © ABL - The Problem Solver 42
Redux-Thunk © ABL - The Problem Solver 43
What is a Thunk? © ABL - The Problem Solver 44 “A thunk is a subroutine that is created, often automatically, to assist a call to another subroutine” -Wikipedia -
Configure Thunk Middleware © ABL - The Problem Solver 45
Update the Actions © ABL - The Problem Solver 46
Add movies reducer © ABL - The Problem Solver 47
Update the reducers index.js © ABL - The Problem Solver 48
Extract movies from store © ABL - The Problem Solver 49
Cleanup  app-container.jsx  Remove allMovies and passing movies to AppPresentation © ABL - The Problem Solver 50
Redux DevTools © ABL - The Problem Solver 51
Remember the user © ABL - The Problem Solver 54
Remember the user © ABL - The Problem Solver 55
Playing and stopping movies © ABL - The Problem Solver 56
Add actions © ABL - The Problem Solver 57
Update reducer © ABL - The Problem Solver 58
Start playing © ABL - The Problem Solver 59
Retrieve the playing movie from the store in apppresentation © ABL - The Problem Solver 60
Retrieve the playing movie from the store in playing- movie © ABL - The Problem Solver 61
Cleanup  app-container.jsx  main-page/index.jsx  genre-list.jsx  genre-row.jsx © ABL - The Problem Solver 62
Filtering movies © ABL - The Problem Solver 63
Filtering movies  The list of filtered movies are derived from state © ABL - The Problem Solver 64
Add action © ABL - The Problem Solver 65
Reducer © ABL - The Problem Solver 66
Filter- movies.jsx © ABL - The Problem Solver 67
App- presentation. jsx © ABL - The Problem Solver 68
Cleanup  Header.jsx  Remove filterMovies  Main-page/index.jsx  Remove filterMovies © ABL - The Problem Solver 69
Remove app-container The AppContainer is no longer needed. © ABL - The Problem Solver 70
Index.js © ABL - The Problem Solver 71
Connect only to required movie data © ABL - The Problem Solver 72
Main-page © ABL - The Problem Solver 73
Genre-list © ABL - The Problem Solver 74
Billboard © ABL - The Problem Solver 75
App- presentation © ABL - The Problem Solver 76
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 77
MauricedeBeijer @mauricedb maurice.de.beijer @gmail.com © ABL - The Problem Solver 78

Check these out next

Better React state management with Redux

Recomendados

Mais conteúdo relacionado

Apresentações para você(20)

Destaque(17)

Similar a Better React state management with Redux(20)

Mais de Maurice De Beijer [MVP](17)

Último(20)

Better React state management with Redux