Edit CRUD Action in React-Redux: A Guide
While starting to build out my Phase 5 Final Project for Flatiron School, I ran into a small issue while working out my CRUD actions. I was able to work out three of the four, create, read, and destroy, but hit a major roadblock when trying to force update to work. Through a solid bit of confusion, a decent bit of work, and an even larger bit of Google, I was able to figure out how to get a functional edit page up and running.
We’ll start out in the main container component for the information we’re trying to edit. We’ll have to give the component an ID in its state so that our form can keep track of which part of state it’s editing. We pass the handleEdit function as a prop to the employee card to be executed onClick in an anonymous function when the Edit button is pressed. Finally, we take the part of our container that mounts the EmployeeForm component and make that line a ternary operator. When an edit button is pressed in an employee card the employeeID in state is given a value of the targeted employee’s ID through handleEdit. When that value evaluates as true instead of false, the EditEmployeeForm component is mounted instead of the normal EmployeeForm component. the employee ID and a function to reset the student ID are passed into the form as props.
The form starts fairly simply. Since you want to be able to edit all parts of your create action form, the first step is to copy that form into a new component. Your create form should also have a handleChange function to make your inputs appear in the form, copy that over as well. The rest of the functions and props for the form will be pretty different from the create form, with a couple exceptions.
We use the componentDidMount component lifecycle method to call the findEmployee function. Through findEmployee we search through all employees in our database and find the specific employee that has the same ID as the employee ID given to state when the edit button is clicked. The function then takes the information returned with the specific employee from the database and sets state to those values.
In the form, the only change you should have to make is to change the event listener to update, which is a function that will send the current state to the edit action listed in our actions component and call a function in our container component that will reset the ID in state, which will unmount the edit form and replace it with the normal create form.
When the Edit Employee form is submitted, it sends the information filled out in the form to the edit action in the employee actions, which sends a fetch request to return the JSON data returned from the specific employee’s path from our database. That data is then dispatched as the payload to the employee reducer with the type signifying that it will edit the employee.
Finally, in your reducer you’ll have to add a case to edit your database. When your edit employee case is called, the reducer spreads apart the current state and filters it to find the specific employee that is equal to the payload’s ID, which will be removed and replaced with the edited version. The most important point here is to make sure that the type called in your fetch request is the same as the case in your employee reducer, or else the reducer won’t be called and your edit won’t go through.
After all that work, you should have a functional React edit form. Much of the logic used in this form is similar to the other actions you’ll use in a CRUD application, but as you can probably see there are some extra steps that are necessary to make the action work properly. Hopefully this post was able to help you figure out how to get your own edit form working properly!