Project: A web application to help users search for jobs and keep track of their applications.
Task: Implement a “delete” button that deletes a job from a user’s dashboard – because sometimes you might not actually want to apply for a job anymore.
- ReactJS – front-end
- Redux – the store/object that takes care of state for the entire App
- Redux DevTools – a GoogleChrome plugin that helps you see what’s in the redux store
- Rethinkdb with Thinky – database and ORM to persistently store users and the jobs they’ve saved
- Material-UI – for styling componenets
This was my first project using ReactJS and Redux. Redux allows for what they call a “unidirectional” flow of data. The concept is simple enough, but actually seeing how the flow of data travels through the application took a while for me to understand. Also, the set-up is a lot to process the first time through, but the benefits are immense once you get it working. When using an MVC framework like Backbone, every time you make a change to the model, you also have to re-render the view which can get complicated as your app grows and gets complicated. But, ReactJS takes care of all rendering of the view for you, and Redux keeps track of all changes in the state of your app.
The user has a dashboard that displays all their saved jobs which they can then click on to get to an individual job view page. We thought this would be a logical place to delete a job because you might read the details of a saved job and decide that it really wasn’t what you were looking for.
Before typing any code, I made a mental list of all the places that would be impacted by this button, which looked a little like this:
- Create a delete button component
- Import button into the job view container
- Create a method that initialized the process of deleting a job from the database in the Job View Container
All of my initial thoughts were mostly about the front-end. It also made me realize that I had some questions about how properties and elements were passed between components and containers in React. Before I started coding, I researched some example projects online, as well as other parts of the app that other members of my team had worked on. I was then able to create a button in the job view container, as well as a skeleton for a handle-delete method that would be called when the button was clicked. At this point, I had to go back into research mode to try to figure out how Redux would help us make the change to the database as well as communicate with the React components of our app to actually delete the job from our view.
I love Redux, and I highly recommend getting started with it by watching the series of videos on Egghead.io by its creator Dan Abramov which you can find here.
At the heart of Redux is a single STORE which is basically an object that keeps track of the entire state of your application. That store can be modified with specific actions which are then put into play using a reducer.
Actions are simply all of those things that need to happen to make your app work. In our project’s case, we have actions that add users to the database, add jobs, refresh the database, etc. Reducers….reduce (if you need a refresher on what reduce does, checkout my Re: contains post). In terms of Redux, a reducer takes an ACTION and applies it to the PREVIOUS STATE and reduces it to get a new state.
This is such a simple concept, but putting it into play when implementing the “Delete Jobs” feature from start to finish is finally how I was able to put this into practice.
In terms of my thought process, before I wrote my code I wrote comments and pseudo code in every file I had to touch to make this successful. This included our reducer file, actions file, and action types files. I hope to explain exactly what I did in the code in my next post.