A follow along React application from Stephen Grider's Modern React with Redux (2019) Udemy course, which can be found here
Songs app is mainly a React-Redux demonstration lesson, in that we would learn how to implement the React side of an application, then the Redux side of the application, and as Stephen Grider pointed out directly: how to get React and Redux then to work together. The application is simple and only displays a list of songs on one side that when selected by clicking the button, will open a song detail component for that particular selection on the other side. The title of the song and a duration is also given, and all the songs provided are based on 90's hits!
- As before, we planned the Component Hierarchy of our React application. This included what components were needed and the roles they play.
- Next we decided what is required in terms of State, and how we would use Redux to handle our state and other data that flows through our app.
- We would next cover the concept of React-Redux, and exactly how we get these two to work together.
- We would need to learn and practice further the concepts of Provider, Connect, Action Creators, Redux Store and Reducers. These are concepts that take some time and repeated practice to master.
- A very important concept we would need to cover is the mapStateToProps function, and all the interesting syntax and mechanics of getting that to properly direct data and objects between components.
- We used Semantic UI for the user interface and styling of the app.
- Of course we used Redux as well as React-Redux. Two different websites that look exactly the same...
- All my development is done in the wonderful VSCode.
- Got to pick on 90's music a little, though maybe Stephen Grider went a little overboard with his reactions :)
Providers, Reducers, Connects, Action Creators, Dispatch, mapStateToProps, Redux Store Oh My! All of this was covered once again, but in much greater detail than the mini application we had just completed prior to this current Songs app. Stephen Grider mentioned that using React-Redux for this particular application was perhaps overkill, but the point was allowing us some practice using React-Redux together for the first time, and not be bogged down with the workings of a more complex application quite yet. But the next section of this course, following a nice exercise, we will finally be getting a taste of a more complicated application that will require some readily apparent reasons to use React and Redux together.
Just as a note, I do not think using this single Udemy course to learn React-Redux will be enough, so I am collecting a nice Bookmark list of materials, including the documentation of both Redux and React-Redux as well as tutorials that come under the FreeCodeCamp heading over at Medium. I am sure this is going to be some journey!