Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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
 U...
 Maurice de Beijer
 The Problem Solver
 Microsoft Azure MVP
 Freelance developer/instructor
 Twitter: @mauricedb and ...
Follow along
 Git repository: https://github.com/mauricedb/nitflex-redux
 Slides: http://bit.ly/react-redux-workshop
© A...
Type it out
by hand?
© ABL - The Problem Solver 5
“Typing it drills it into your brain
much better than simply copying
and...
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 o...
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*
Expand...
Stateful
components
© ABL - The Problem Solver 15
Application
Login Main Page
Header Billboard Genre List
Genre*
Movie*
Ex...
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...
Single source
of truth
 The application state is stored in a single location
 Do not scatter the state over lots of comp...
State is
read-only
 The state objects are never changed by the
application
 Every state change is the result of an actio...
Changes
with pure
functions
 Reducers are pure functions that take the current
state and an action as input and return a ...
UI versus
App state
 Redux should be used for application state.
 Do not store UI state in Redux!
© ABL - The Problem So...
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 R...
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 Prob...
Redux Middleware
© ABL - The Problem Solver 40
Redux
Middleware
© ABL - The Problem Solver 41
“Redux middleware provides a
third-party extension point between
dispatchin...
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 ...
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
Redux
DevTools
© ABL - The Problem Solver 52
Redux
DevTools
© ABL - The Problem Solver 53
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
app-
presentation
© 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 Ap...
MauricedeBeijer
@mauricedb
maurice.de.beijer
@gmail.com
© ABL - The Problem Solver 78
Prochain SlideShare
Chargement dans…5
×

Better React state management with Redux

383 vues

Publié le

Workshop at BoostJS abut doing better React state management with Redux.

Publié dans : Technologie
  • Soyez le premier à commenter

Better React state management with Redux

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

×