I thought I thunk until Redux!
I absolutely cannot believe I’ve arrived at the final project of the Flatiron School’s Software Engineering Bootcamp. Looking back over the last 5 months, I am stunned by how much I have learned. The progress is evident in our 5 projects, progressing from a CLI Application to a full-stack web application. Now, right at the home stretch, I realize just how much more I have to learn!
This project required use of a Ruby on Rails back-end API to store and handle our data, it required multiple routes on the front end and (to my dismay) required we incorporate Redux Thunk Middleware. Once I had the idea for my app, I began with at least some confidence (I thought). Then came Redux Thunk. Well, what I thunk I knew, I needed a major refresher on.
Redux Thunk allows you to write actions that return functions (like making a fetch request) so the dispatch only runs after asynchronous operations finish or only on certain criteria. After setting up your reducers and initial state the way you want, you then start building your app and dispatch actions to the reducer to update the state of your app. Things started smoothly with creating User signup and login functionality. I was dispatching functions as actions to my reducers and the state was updating with everything I needed (based the JSON structure I sent from my API). Then things got tricky.
As I began to build the app, I realized just how complex my project was. I should have taken a moment to sit down and decide how I wanted everything structured and correlated, but I didn’t. I kept building Components and manipulating my data structure to accomplish the immediate goal at hand. Halfway through the project, I realized I needed to sort this mess out.
I sat down and decided I would map each table in my API to a reducer on the front it to handle state for that individual table. This (in my opinion) where I should have started. The lessons to learn Redux were great, but I must have missed the parts describing just how to structure it and that is vital. Once I decided I would separate each table to it’s own reducer things became a little clearer. I created action files for each reducer and began placing all dispatch functions in the appropriate actions file. I powered through and was able to get my app working, but it left a lot of messy code that I needed to sort through re-factor.
Redux Thunk and React provide the framework to make some really great apps. How you structure those apps from the very beginning is absolutely vital. Practice will help, and I intend to continue building projects with them until structuring my code becomes second nature to me. Then I will thunk.
