DEV Community

Abdul Rahim Shahad
Abdul Rahim Shahad

Posted on

FLATIRON FINAL PROJECT - REACT/REDUX & RAILS API

For my final project at Flatiron school I decided to make an app that would allow user post their own versions of popular movie titles online. This app is called Fan Fiction and has full CRUD functionality.

One of the major difficulties I faced when I was building the app was implementing reducer and action for edit functionality so I am going to explain how I implemented it.

First, I started from the reducer by creating a case for the edit action. In the reducer, I iterated through the movies array in my state object using the find method and returned the movie that matched the the payload I was going to receive from my edit action. The payload in this case was also an id. I then set this return value to a variable. After that, I set the variable to the current movie object in my state push it into my original state using the spread operator so as to not alter the other parts of the state.

Next, I created the action for both edit and update. Edit action grabs for us the item we want to edit and update makes the necessary changes to that item.

edit and update action

Finally, I made a reducer for updating. The logic I used here was to set a variable to the payload I was receiving from the update action. Then iterate through all the movies in state to see the movie whose id matched the id of the movie we get from the payload. When that movie is found, we replace it with the new movie object from the payload and then add it to the existing state using the spread operator. Finally we clear out our current movie object since it has already been modified.
update reducer

Overall this project really tested my knowledge and skills but I am far from finished with this app. I intend to add more useful features to it in future.

Top comments (0)