React | Redux | Rails — This has been CHALLENGING!
Well for starters, during the first week on project week, I wanted to build one certain project that I prepared a month in advance, breeze through that code by meeting the basic requirements for the project, and then refactor and add additional components during the second week However, I had many days where I felt overwhelmed with long sleepless nights. Between maintaining my career track prepping for mock interviews, working during the day, practicing coding challenges, and working on figuring out my project. Maybe my ideas were too big at the time. I’m not sure, but I had to dial back my ideas and focus on the task at hand.
During this entire project, It has been extremely challenging. My first resource was obviously the learn lesson videos, my instructor, and labs dedicated to react/redux. I also used additional resources, such as the React/Redux documentation, Dev Ed, on YouTube, Scrimba, and Udemy/Udacity courses. I love to read the material, but I needed to see other material that would help me digest the logic of react and redux state management.
I was able to follow the format of Brad Traversy’s video and use node/express/mongo DB on the back end. This was the most intensive build, which took sleepless days and nights to complete. From spinner components, to AUTH components, this pretty much covered everything in React, minus Hooks. I needed to figure out authentication, which was pretty tough for me in rails, however the plan is to add authentication to my Gamer App in due time.
This was made with love. I was able to learn more about hooks and context. Although when I decided to wait until I completed the front-end to add redux, it became even tougher to rollback and add redux. Also, I only had photos that I fetched, but I never added any additional photos. I decided to hold off on adding redux, since I didn’t have the time needed to dedicate to doing so.
- Project idea # 3 — Gamer App — App to search and add games. Now this is one that will cover all of the requirements needed for the react/redux project. I created and styled this app so people can view, and create games. The user can persist a new game and also a new rating associated with the game. You can also filter out the games, as I was able to implement a search field that uses the filter method to create a reactive search field. If you’re not happy with the rating, you can delete it. I will eventually incorporate more to make this application more user-friendly.
- Challenges
- React Hooks
I'm still learning how to incorporate hooks more often, so I took a course on scrimba dedicated to react hooks. I used information from the React course to add hooks into my Mantis application. In my Context.js file I added hooks to reduce the complexity of state management.
Hooks are functions that let you “hook” into React state and lifecycle features from functional components. A certain built in know hook is use State. It allows you to not need to convert your function into a class.
I struggled with reducers and actions throughout the curriculum, however the more I continue to console.log, and debug through my errors, it gets easier to understand. For example, with my Gamer App, I was frequently figuring out how to replace data with the previous data with the same id. I have a case called delete rating that deletes the game’s rating when you click the button. I just needed to map over the games and match the ids to dispatch the task. Here's the code in my reducer;
Luckily I figured it out, and thought about the logic behind it by doing a little sudo code.
I believe anonymous functions are just one of those that are hit or miss at the moment. Whenever I see code like this.. ()=>, I need to realize that not having the const “name of function” = () => Is throwing me off. I tend to return to the JavaScript learn section to review and work on coding challenges in JavaScript.
Did you know if you use const besides using function, you can avoid using .bind(this)? Its like const knows that when you are inside the function, you aren't referring to the function when you say “this”, but the state of the class. If you were to use the function using the function keyword, “this” is referring to the function itself.
I’m so ready to graduate!
Originally published at https://rshield1.github.io on October 12, 2020.
