Downloaded 29 times
![Maurice De Beijer [MVP], profile picture](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1756998088)
Uploaded byMaurice De Beijer [MVP]
Better React state management with Redux
This document outlines a workshop on using Redux for state management in React applications. It introduces Redux, its core principles of single source of truth, state is read-only, and changes are made with pure functions. It demonstrates setting up a sample application with Redux, including actions, reducers, the store, middleware, and connecting React components. The document guides integrating Redux for user login/logout, loading movies data, playing movies, and filtering movies.
Better React state management with Redux
- 1. Better React state management withRedux 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 deBeijer 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 Gitrepository: https://github.com/mauricedb/nitflex-redux Slides: http://bit.ly/react-redux-workshop © ABL - The Problem Solver 4
- 5. Type it out byhand? © 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 isReact? © 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 usesa 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 Singlesource 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 Thestate 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 Reducersare 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 actioncreator © 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 NPMreact-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 fromthe store © ABL - The Problem Solver 38
- 39. Cleanup app-container.jsx Removeuser 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 RemoveallMovies 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 thestore in app- presentation © ABL - The Problem Solver 60
- 61. Retrieve the playing movie from thestore 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 listof 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 RemovefilterMovies Main-page/index.jsx Remove filterMovies © ABL - The Problem Solver 69
- 70. Remove app-container The AppContainer isno longer needed. © ABL - The Problem Solver 70
- 71. Index.js © ABL -The Problem Solver 71
- 72. Connect only to requiredmovie 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 updatinglocalStorage 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