As I look at the requirements list for this project, I am amazed that I was able to pull it all together. But, I also remembered that those who have gone before me did it, too. Wow, I finally made it to the end of this stage of learning. This project took me longer than I expected mostly because it combined so many different things that I had learned along the way. As I went through each of the lessons and labs for React and Redux, I understood those pieces of the puzzle individually. But putting it all together was a challenge. I chose a medications app as a way to bridge between my previous career as a medical assistant and my future career as a web developer. With this app, you can look at information on different medications and if you want, you can give a review which includes a rating and comment.
Building the API was like getting a refresher on Ruby after doing Javascript for awhile, but then I had to make sure it would respond to fetch requests. Since I use a virtual box with a Linux-based elementaryOS installed, I searched and found Insomnia to use to test my GET and POST requests. For some reason, it seemed like it worked better for me than Postman. Once I was sure I could retrieve and post to my API endpoints, I started working on my front end.
Incorporating Redux with React was the hardest part for me to get my head around. I spent many hours watching videos, going back to lessons, and referring to other people’s projects on GitHub until I was able to understand it and apply what I learned to my own app. Now, each component works together with the Redux store to render what the user wants onto the screen. To get this to happen, there are a few different files that have to be in place. The actions have to be called properly and have to match up to one of the actions listed in the respective reducers switch statement. You also have to list the reducer properly in the combineReducers function for it to be in the Redux store. If your reducer is called medicationsReducer, then if you want your prop to be called medications, you have to explicitly list it as “medications: medicationsReducer” in your combineReducers or it will not work.
An example of how Redux works is when a user clicks on Medications in my app, There is a fetchMedications function that is called in the componentDidMount function. The fetchMedications function, in turn, calls a fetch to my API URL and when it receives a response, it dispatches the medicationsFetchDataSuccess action with the medications object as a payload. The action “MEDICATIONS_FETCH_DATA_SUCCESS” then triggers the medicationsReducer to return the medications. So when all of this is done, the connect function in the MedicationsPage component recognizes that this change in state has occurred and because of the mapStateToProps function and fetchMedications function (automatically mapping dispatch to Props), the medications object is added as a prop and the screen renders the list of medications.
The Learn Video Lectures React section was one of the resources I used a lot, but there was also the free tutorials by Dan Abramov, Getting Started with Redux, https://egghead.io/courses/getting-started-with-redux and Building React Applications with Idiomatic Redux, https://egghead.io/courses/building-react-applications-with-idiomatic-redux. Another resource that was useful was http://javascript.tutorialhorizon.com/2014/09/21/installing-listing-and-uninstalling-packages-using-npm/ that gives helpful information about listing the dependencies in your project as well as uninstalling packages that you decided not to use.
One of the best things I learned in building this app is that you have to pay attention to exactly what is in your Redux store using the dev_tools. If I had looked carefully at it, I would have seen my problem right away and not spent a few days trying to fix something in the React side that had really originated in my API serializer! (If you want an attribute of your model to be able to come through in your JSON object, you have to list it!)