Putting the C in CRUD — Part 1

Group Ride App — Creating a new ride

Allowing users the ability to Create, Read, Update and Delete their own rides is an essential feature of my Group Ride Application. This week, I worked on giving users the ability to create rides. I began this process on the frontend, adding a form component as well as an action and a reducer to store the data entered into the form by the user.

I created a React functional component and used onChange event listeners for each form input to keep track of a user’s entries. I used these event listeners to invoke the handleOnChange function. The user’s entries (rideData) are passed in as an argument to the updateRideForm action creator.

const handleOnChange = event => {
const rideData = {
...rideFormData,
[event.target.name]: event.target.value
}
updateRideForm(rideData)
}

To handle storing the user’s form entries in state, I created a ride form action, updateRideForm, and a corresponding reducer. When the updateRideForm action is invoked, the data entered by the user is returned in the Redux store.

// ACTION //export const updateRideForm = formData => {
return {
type: "UPDATE_RIDE_FORM",
formData
}
}
// REDUCER //const initialState = {
name: "",
startingLocation: "",
startingTime: "",
date: "",
level: "",
distance: "",
description: ""
}
const rideForm = (state = initialState, action) => {
switch (action.type) {
case "UPDATE_RIDE_FORM":
return action.formData
default:
return state
}
}

Next, an additional event listener is employed to detect the submission of the form and pass the form data, via a fetch request to the backend, to create a ride. The steps for creating the ride on the backend will be covered in next week’s blog post.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store