Workout Plan React Project
For my Phase 5 React project, I decided to create (if you haven’t guessed already) an app where a user gets to create a work plan and exercises for the workout plan. For my backend, I am using a Rails API to persist my data using the PostgreSQL database. For my frontend, I am using Javascript with the React library with Redux and redux-thunk middleware to modify state change and makes use of Hooks.
Requirements
the requirements for this project are to use thecreate-react-app generator to start the project, render one HTML page, have 5 stateless components, have 4 routes, make use of react-router and proper RESTful routing, use Redux middleware to respond to and modify state change, make use of async actions and redux-thunk middleware to send data to and receive data from a server, client-side application should handle the display of data with minimal data manipulation, and have minimal styling.
Rails Backend
The migration for the backend consists of two tables. A ‘Workout’ table that has a title and focus. An ‘Exercise’ table that has a name, target, sets, and reps. Workouts has many exercises and an exercise belongs to a workout.
Containers
I have two containers which are a ‘WorkoutContainer’, and ‘ExerciseContainer’ The ‘ExerciseContainer’ fetches all the exercises from the backend and mounts it to the the DOM, and calls the ‘WorkoutComponent’ that passes the exercises into the component. It also creates 2 routes for exercise list page and exercise form. The ‘WorkoutComponent’ fetches the all the workouts and mounts it to the DOM so now it has access to all workouts and exercises. It has 3 routes for workout list page, workout form, and workout show page. The use of these containers is to fetch the data we need and pass them to the components that will present the data.
Components
In total I have 7 components. The only stateful components are the forms to create a workout and create an exercise. Local state is needed in these components to alter the value inside the textboxes and to send the data to the fetch action.
Forms, Actions, and Reducers
Using state in forms is the best way to keep it controlled. The initial state object is blank. Then using the onChnage event handler updates the state to whatever the value is set to whatever the key is. Once you have filled out the form, updates the state, and click ‘submit’, it will take the data and dispatch createWorkout function action with data as the arguments. The createWorkout() function will send a fetch request with the data to create a new object in the back end.
Once the fetch has been resolved and brings back a response which is that workout object, it dispatches it to redux store using the “ADD_WORKOUT” reducer you see on right in the picture above with the already state that has bet set in the store. The same idea and methods go for creating an exercise, but it needs to have the workout id in which I pass it down to the exercise form from Workout show page.
UseHooks
Using hooks has made this project a lot more easier to work with and read using it to hook on React features. The ‘useState’ hook helped add React state to function components. The ‘useDispatch’ hook returns a reference to the dispatch function from the Redux store to dispatch actions. The ‘useNavigate’ hook I used to navigate back to a certain page after dipatching an action. Most importantly, the ‘useSelector’ hook which allowed my components to to extract data from the Redux store state. There were some other I also used, but these were the most useful to my project.
Conclusion
This was a tough project for me for sure especially being a beginner at React and Redux, but I do have to say I have learned a tremendous amount through the struggle. This project is no where close to being perfect, but it works and I am happy about that.
