Complex State Management

So what complicates state management?

Nested objects created by model associations in your backend of course 🤓!

It's been several weeks since I started building applications with React, and this last one got a little complicated. My latest project was constructed with a React frontend and a Ruby on Rails backend. Setting up the associations of the 3 models for the project wasn't too bad, but utilizing that information in the frontend proved to be quite a bit more challenging. I found myself in a constant sea of red error messages every time I submitted a form. Well, it turned out I really needed to backtrack and reinforce my understanding of basic state management before I could manage more complex updates.

If your models are associated as have_many_through to support a many-to-many relationship, things can get a little quirky. Let's start with a seemingly simple example. So, we have a book club app. It has 3 models: user, book, and comment. The relationships are as follows:

For this project, I used the useContext hook for the first time and it was wonderful! Passing props for a project this large would have driven me crazy. Happy I can add this skill to my newbie developer arsenal. So, here is my context for managing my books. I only wanted the user to have the ability to create new books so it's simple, but the context of the comments gets a bit more intricate.

The handleAddNewBook function is relatively straightforward. I use the spread operator on the books array to gain access, and then I insert my new book. Super simple. Now...because each user has their own books array created by the backend associations, I also need to update the user state. This is where my brain started malfunctioning so to speak. How do I accomplish such a thing? Those synapses were firing, but they sure weren't connecting until my instructor broke down what I needed to do.

To keep this post from getting too cluttered, the above image only has functions that update the user state for their books and comments. The user can add a book, add a comment to that book, edit a comment, and delete a comment. I break each function down to better explain below.

Updating Complex State For A Create Action

handleAddNewUserBook and handleAddNewUserComment

• these functions are similar in that the user is adding new objects to their respective associated books and comments arrays
• open the user object with the spread operator (...user)
• direct your attention to the respective array and update it's value
• everything after the comma is what you will be setting the value of the respective user arrays to
• Important: take note that the entire value must be wrapped in brackets because the key (books) is an array

Updating Complex State For A Patch Action

handleEditUserComment

• updatedComments is the array of comments after we have mapped over the comments array to find the comment we would like to update and swapped it for the new comment
• now that we have this new array, we set the user in much the same way as the two functions above
• the difference is that this variable is an array already, so it does not need to be wrapped in brackets

Updating Complex State For A Delete Action

handleDeleteUserComment

• when updating state for a delete action, the filter method is used rather than map and the array that is returned will not include the deleted comment

Conclusion

As applications grow, state management gets more complex to manage and useContext definitely helps with the separation of concerns. I hope you utilize both masterfully with the help of this post in the future. This was also my first time using the Polacode extension for Visual Code Studio. I think the image clarity is better than the screenshots I usually use. I'd love to hear your feedback. Please comment below. Happy coding!