Better React state management with Redux
•Download as PPTX, PDF•
3 likes•645 views
![Maurice De Beijer [MVP]](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1696317804)
Workshop at BoostJS abut doing better React state management with Redux.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (17)
Similar to Better React state management with Redux
Similar to Better React state management with Redux (20)
More from Maurice De Beijer [MVP]
More from Maurice De Beijer [MVP] (18)
Recently uploaded
Recently uploaded (20)
Better React state management with Redux
- 1. Better React state management with Redux Maurice de Beijer @mauricedb @react_tutorial
- 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. 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. Follow along Git repository: https://github.com/mauricedb/nitflex-redux Slides: http://bit.ly/react-redux-workshop © ABL - The Problem Solver 4
- 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. Prerequisites Install Node & NPM © ABL - The Problem Solver 6
- 7. Install Node.js & NPM © ABL - The Problem Solver 7
- 8. Short recap What is React? © ABL - The Problem Solver 8
- 9. React © ABL - The Problem Solver 9 “React is a JavaScript library for building user interfaces” - Facebook -
- 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. React Component © ABL - The Problem Solver 11
- 12. Nitflex The sample application © ABL - The Problem Solver 12
- 13. Nitflex © ABL - The Problem Solver 13
- 14. Main components © ABL - The Problem Solver 14 Application Login Main Page Header Billboard Genre List Genre* Movie* Expanded Movie Playing Movie
- 15. Stateful components © ABL - The Problem Solver 15 Application Login Main Page Header Billboard Genre List Genre* Movie* Expanded Movie Playing Movie
- 16. Clone Nitflex & NPM install © ABL - The Problem Solver 16
- 17. Redux © ABL - The Problem Solver 17
- 18. Redux © ABL - The Problem Solver 18 “Redux is a predictable state container for JavaScript apps” - Dan Abramov -
- 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. 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. 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. 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. UI versus App state Redux should be used for application state. Do not store UI state in Redux! © ABL - The Problem Solver 23
- 24. Login example © ABL - The Problem Solver 24
- 25. Installing Redux © ABL - The Problem Solver 25
- 26. ReduxComponents © ABL - The Problem Solver 26
- 27. Redux Components Actions Reducers The store © ABL - The Problem Solver 27
- 28. Login action © ABL - The Problem Solver 28
- 29. Login reducer © ABL - The Problem Solver 29
- 30. combineReducers © ABL - The Problem Solver 30
- 31. Unit testing © ABL - The Problem Solver 31
- 32. Unit test the action creator © ABL - The Problem Solver 32
- 33. Unit test the reducer © ABL - The Problem Solver 33
- 34. Redux and React © ABL - The Problem Solver 34
- 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. Create store © ABL - The Problem Solver 36
- 37. Dispatch login action © ABL - The Problem Solver 37
- 38. Get the user from the store © ABL - The Problem Solver 38
- 39. Cleanup app-container.jsx Remove user and loginAsUser() app-presentation.jsx Remove loginAsUser() © ABL - The Problem Solver 39
- 40. Redux Middleware © ABL - The Problem Solver 40
- 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. Installing redux-thunk © ABL - The Problem Solver 42
- 43. Redux-Thunk © ABL - The Problem Solver 43
- 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. Configure Thunk Middleware © ABL - The Problem Solver 45
- 46. Update the Actions © ABL - The Problem Solver 46
- 47. Add movies reducer © ABL - The Problem Solver 47
- 48. Update the reducers index.js © ABL - The Problem Solver 48
- 49. Extract movies from store © ABL - The Problem Solver 49
- 50. Cleanup app-container.jsx Remove allMovies and passing movies to AppPresentation © ABL - The Problem Solver 50
- 51. Redux DevTools © ABL - The Problem Solver 51
- 52. Redux DevTools © ABL - The Problem Solver 52
- 53. Redux DevTools © ABL - The Problem Solver 53
- 54. Remember the user © ABL - The Problem Solver 54
- 55. Remember the user © ABL - The Problem Solver 55
- 56. Playing and stopping movies © ABL - The Problem Solver 56
- 57. Add actions © ABL - The Problem Solver 57
- 58. Update reducer © ABL - The Problem Solver 58
- 59. Start playing © ABL - The Problem Solver 59
- 60. Retrieve the playing movie from the store in app- presentation © ABL - The Problem Solver 60
- 61. Retrieve the playing movie from the store in playing- movie © ABL - The Problem Solver 61
- 62. Cleanup app-container.jsx main-page/index.jsx genre-list.jsx genre-row.jsx © ABL - The Problem Solver 62
- 63. Filtering movies © ABL - The Problem Solver 63
- 64. Filtering movies The list of filtered movies are derived from state © ABL - The Problem Solver 64
- 65. Add action © ABL - The Problem Solver 65
- 66. Reducer © ABL - The Problem Solver 66
- 67. Filter- movies.jsx © ABL - The Problem Solver 67
- 68. App- presentation. jsx © ABL - The Problem Solver 68
- 69. Cleanup Header.jsx Remove filterMovies Main-page/index.jsx Remove filterMovies © ABL - The Problem Solver 69
- 70. Remove app-container The AppContainer is no longer needed. © ABL - The Problem Solver 70
- 71. Index.js © ABL - The Problem Solver 71
- 72. Connect only to required movie data © ABL - The Problem Solver 72
- 73. Main-page © ABL - The Problem Solver 73
- 74. Genre-list © ABL - The Problem Solver 74
- 75. Billboard © ABL - The Problem Solver 75
- 76. App- presentation © ABL - The Problem Solver 76
- 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. MauricedeBeijer @mauricedb maurice.de.beijer @gmail.com © ABL - The Problem Solver 78