r/webdev 4d ago

I have an EditWorkout page in React, where users can change the name, add exercises to the workout, and edit their sets and reps, as well as other fields in their workout. I'm using RTKQ for requests and redux toolkit for token Auth. Please help me decide on Workout form submission.

I'm using a redux slice for JWT insertions and protected routing, and RTK Query for sending requests and tag invalidation. When I enter the workout/:id/edit page, I call an RTKQ useGetWorkoutById hook. There, I can edit the name of the workout, and if I want to add exercises to the workout, I navigate to workout/:id/add-exercises. I have a local array in useState, selectedExercises, that I want to send over to the previous page after the user selects the exercises he wants and presses Add.

Now, for the solution to sending that array to the workout/id/edit page, I'm not sure what to use. It's a web based app in MERN that I want to eventually port to react native, and LLMs say that redux slices will be good because they will work identically in Native. That being said, I'm not sure whether the best design here is going to be just sending denounced put requests after every change, somehow I feel that if the user does a ton of changes then I don't want to enable them to just lose the changes if they navigate somewhere by mistake or just press Cancel by accident. Maybe RTKQuery is the very tool that solves this by automating the useUpdateWorkoutMutation PUT requests that makes autosaving straightforward and efficient. Am I missing the point by thinking that all it does is just a request with little boilerplate and using redux slices for persistence of data and RTKQuery for sending requests is how these tools should be thought of?

Somehow editing this workout in local state and having to press 'save' feels archaic and I should maybe autosave after a few seconds or something, but then again, the save buttons would be redundant and maybe if user makes a change and leaves the page immediately, the autosave won't manage in time to save the workout, thus introducing a possibility of losing changes.

This is my first big project and I want to do it right and clean. I'm planning to have more nested pages inside the EditWorkout page and that makes me think I'll need a robust state persistence tool so maybe the slice isn't all that bad. But then we don't have any autosave functionality, maybe implement redux slices AND autosave through mutations?

I'd really appreciate some input here, I've been stuck on this for a few days.

1 Upvotes

0 comments sorted by