DEV Community: Antonio Carter

Connecting Redux to Your React Application

Antonio Carter — Thu, 06 Jan 2022 21:49:05 +0000

Redux is a useful JavaScript library that allows you manage state in your application. Through the use of Thunk middleware, you can even use it to fill your store with data from calls to an API. For this article, I'll walk through how I used Redux to track state in my Content Tracker React application. I'll be removing extraneous code snippets, so if you're interested in seeing everything, visit my Github!

What's in Store

The state of your application will be located in the Redux store. In order to create this variable, we'll need to install a few dependencies via node package manager (or yarn) to have access to all of the functions needed to take advantage Redux. Both of the following are required: redux and react-redux. The middleware redux-thunk should also be installed if your store requires asynchronous logic (I'll be using this in my examples).

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter as Router} from 'react-router-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import reducer from './reducers/Reducer';

const store = createStore(reducer, applyMiddleware(thunk));

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <Router>
        <App />
      </Router>
    </Provider>    
  </React.StrictMode>,
  document.getElementById('root')
);

We create our store using the createStore method from Redux, which takes two arguments: our future reducer, and a method to apply our Thunk middleware. We use the <Provider /> component with our store as a property to allow its children access to our store and thus our application's state.

Reducio!

Our store requires us to create a reducer that will take our current state and an action and "reduce" these to create our new application state. One principle to follow is that our state should be immutable. That is, our new state will be derived from a copy of our previous state and will reflect the change based on our actions type. An action is an object with a type key and some kind of payload/data that will be needed to create our new state. In my application's backend, each Content had many Reviews however I normalized this setup in my app's state. Rather than having nested data, I had two arrays (one for each), two reducers, and utilized Redux's combineReducers method which sends the relevant action to the correct reducer.

//Reducer.js
import { combineReducers } from "redux";

const reducer = combineReducers({
  contents: contentsReducer,
  reviews: reviewsReducer
});

export default reducer;

function contentsReducer(state = [], action) {
  switch (action.type) {
    case "GET_CONTENT":
      return [...state, ...action.contents]

      case "CREATE_CONTENT":
        return[...state, action.content];

      case "DELETE_CONTENT":
        return[...state].filter(elem => elem.id !== action.payload);

    default:
      return state;
  }
}

function reviewsReducer...

Dispatch, not Datpatch

Now we've gotten to the part where we connect one of our React components to the store. To do this, we'll be using the useSelector and useDispatch hooks from react-redux. The former allows us to connect to our store's state while the latter allows us to connect to our dispatch function from our store. We'll be dispatching actions to go from our current state to our new state in our component. I used the useEffects hook from react to dispatch my fetchContents action when the Contents List component mounted.

//contentActions.js
export const fetchContents = () => {
  return (dispatch) => {
    fetch("http://localhost:3000/contents")
      .then(response => response.json())
      .then(data => {
        dispatch({ type: "GET_CONTENT", contents: data });
      })
      .catch(fail => alert(fail));
  };
};

//ContentList.js
import { useSelector, useDispatch } from 'react-redux';
import { useEffect } from 'react';
import { fetchContents } from '../actions/contentActions';

export default function ContentList() {

  const contents = useSelector((state) => state.contents)
  const dispatch = useDispatch()

  useEffect(() => {
    if (contents.length === 0) {
      dispatch(fetchContents())
    }
  }, [])

Conclusion

In summary, you'll need to connect your application to the store, create a reducer based on how you'd like to store the data in your application state, and define the actions that will be be triggered based on changes/input to your components. Hopefully this article was helpful in using Redux to manage the state of your React application!

Creating a Content/Entertainment Tracking App with React

Antonio Carter — Tue, 04 Jan 2022 17:30:08 +0000

I've just wrapped up my latest project: a content tracking application that used React, Redux, and a Rails API to persist the user-inputted data. The objective of this project was to create a single-page application using these technologies. Here is a link to the frontend repository as well as the backend repository. To try out the application yourself, simply clone both repositories to your machine, run bundle install, start the rails server with rails s, and run npm install && start on the frontend.

Project Planning

I decided to go with a content/entertainment tracking app because it was similar to previous projects and would allow me to focus on how the technologies differed/improved. I started by brainstorming how I wanted to set up my backend (mainly what the models would look like). While outlining my backend, I was also thinking about the components that I was going to have in my React app. I came up with a rough list, as well as a sketch on how I wanted them to look on the page. Since I was using Redux to manage the state of my application, I also thought about which components I was going to have to connect to the store and how.

Implementation

To create the rails backend, I created a new rails project using the --api flag. I used the resource generator to create the skeleton of what I needed to handle content and reviews in rails. To protect the data on the server side, I added validations to both my Content and Review models. For example, used a method to persist content titles and types in title case. For reviews, I used a validation to make sure that the rating was between 1 and 5. In thinking about the future fetch request I was going to send to my backend to retrieve my seed data, I used the Active Model Serializers gem to send my object associations in JSON. I later removed the associations but I'll talk about this later.

After wrapping up my backend, I created my frontend application using create-react-app. First, I installed the majority of the libraries I needed for this project: Redux, React-Router, and Redux-Thunk. Then, I focused on building my actions, reducer, and dispatch since this part was the trickiest for me. Initially I attempted to normalize my database structure in my Redux store however I found that my new state objects weren't being created properly. I then decided to separate my reducer and actions and use the combineReducers method from Redux. I used hooks where I could because I found they made the process easier; I even added the react-hook-form library to render both forms in my application. I had separate components for my About page, the Nav Bar, Content List, Content, Review List, Review, and a component for each of the forms. This was a single-page application but I still tried to stick to RESTful routing where it made sense. I used react-router to mimic this convention on the client side. For example, clicking on the New Review link under one of the content would take you to "/contents/1/review/new". I usually waited to test my app's functionality after I completed all of the pieces that were needed to complete a particular action.

Roadblocks and Struggles

While programming this application, I ran into a few roadblocks that left me stumped. I used a combination of my notes, official documentation, and Google to resolve the problems I ran into. For example, after having a hard time organizing my store, I used the combineReducers function from Redux. After I fetched my data, I was having a hard time adding it to the store until I realized that I was misusing the spread operator. Having the backend open whenever I made calls to my rails API was incredibly informative when I was testing my GET, POST, and DELETE calls. Moving forward, I hope to clean up the presentation of the app. I'd like to try using a UI library that could help it look more presentable than the minimal CSS I've added.

Rails Takes a Backseat..JS is in Front Now!

Antonio Carter — Sat, 30 Oct 2021 14:51:32 +0000

Corny title and weak analogy aside, I've just completed my latest iteration of a movie review application. The objective of this project was to create a single-page application using Ruby on Rails API for the backend and JavaScript/HTML/CSS for the frontend. The two parts of the application communicated asynchronously using JSON. Here is a link to the frontend repository as well as the backend repository. To try out the application yourself, simply clone both repositories to your machine, run bundle, start the rails server, and open the html file from the frontend in your browser.

Backend: Rails API

To create the rails backend, I created a new rails project using the --api flag. I used the resource generator to create the skeleton of what I needed to handle movies and reviews in rails. To protect the data on the server side, I added validations to both my Movie and Review models. For example, I created a method to put a movie's title in title case before it's persisted to the database. For reviews, I used a validation to make sure that the rating was between 1 and 5.

The biggest change from the last project to this one was that ruby was no longer handling the views for the application. Long gone are the html.erb files (dramatic I know). Instead of rendering the view for a given action (index, show, etc.), I rendered the relevant object in JSON format. To make that process easier, I used the Active Model Serializer gem to convert my rails objects into the JSON that would be fetched by the frontend of my application.

Frontend: JavaScript/HTML/CSS

Since this was a single-page application, there was only one html file. After thinking about how I was going to display everything on the page, I made the outline of the app in the index.html file. This included the form to create a new review, a section to display all of the movies with all of their reviews, and a form to create a new movie at the bottom of the page. Of course if this app were to be in production, you'd want more control over who's allowed to add/delete movies.

After creating the skeleton of my webpage, I moved on to building my JavaScript files (one per class). I made the MovieApi class to create an instance that would handle the API calls to the rails backend. This is where the methods to READ all the movies in the database, CREATE new movies, and DELETE movies reside. The Movie class is responsible for creating movie objects and displaying them on the webpage. I had two similar classes for my ReviewApi and Reviews, respectively. Using elements that I created in the html file, I added elements that represented the movie and review data to the DOM.

Rails Movie Review App

Antonio Carter — Wed, 18 Aug 2021 09:51:34 +0000

That's it for project three!

This morning, I've finished building out a movie review app using Ruby on Rails. Here is the link to the git repo. I continue to use this similar movie review idea for all of my projects and it's interesting to see how the implementation of the concept changes as I learn new technologies.

What does it do?

To access the app, a user will need to log in/sign up for an account. There is the option to sign up through the app or use your Google account to sign in via Omniauth. Once logged in, a user can choose a movie, and submit a review that includes the number of stars (1-5), and any commentary (less than 500 characters).

There are four main models that interact in the background of the application. A Genre has many movies and has a name field. A Movie has a title, year, synopsis, belongs to a Genre, and has many Users through Reviews. A Review has a rating, content, and belongs to both a Movie and a User. Finally, a User has an email, username, password, and has many Movies through Reviews. With these associations, a user can navigate through the app and see things like all the users who watched a particular movie or all the movies that fit under a certain genre.

I also created an admin class that can not only create/edit anyone's reviews, but also create, edit, or delete genres and movie and their associated children. I decided to add an admin account once I realized that it wouldn't make sense to give any user all of those actions within the application. A user can visit every page within the app except for the pages that contain forms and all CRUD-related links/buttons are unavailable to them.

What did the process look like?

I tried to be a bit more organized with this project than I had been in the past. For the most part I utilized Microsoft OneNote to keep track of my ideas and plans. Even as I was finding bugs and things that I wanted to change, I kept an evergreen list going so that I wouldn't forget anything. I also kept a physical journal nearby to sketch or write out any ideas that I had, both while at my desk and while away. It was especially helpful when I had ideas at work from wherever I had left off.

Any takeaways after completing the project?

As always, having a plan and sticking to it helped the most. Whenever I felt like I might be getting too far ahead of myself, I took a look at the overall outline to recalibrate, get my bearings, and continue moving forward with the project.

This project has been the most mindful I've ever been with making meaningful commits; it even helped jog my memory when I would forget where I left off.

One thing I'm usually bad at is asking for help; I did a lot better job at asking for questions and getting that help sooner than later.

One thing I would still like to do in the future would be to utilize a movie API to retrieve the film data so that a user can search for a film they'd like to review.

Thanks for reading!

Movie Tracker Sinatra App

Antonio Carter — Mon, 05 Apr 2021 00:42:10 +0000

That's a wrap for the second project!

In continuing with the theme of revolving my projects around my love for movies, I've just finished my Sinatra CMS (content management system) project. I decided to make a movie tracker web application à la Letterboxd to test my skills with RESTful routes and CRUD. Before I continue, here is the link to the git repo.

So, what does it do?

To access the app, a user will need to log in/sign up for an account. After a user creates an account, they are redirected to the "/reviews" page where they will see a list of all the movie reviews from every user.

Each review consists of a movie title, release year, a rating from 1-5, the content of the review, and the user it belongs to. The "/reviews" page displays this for each review that exists in the database.

To create a review, a user must simply click the link towards the top of the page where they are redirected to "reviews/new" and are able to fill in the fields mentioned above (except for their username). After a new movie review is created, the user is brought back to the "/reviews" page where they will be able to see their new review with the others.

To look at an individual movie review, a user can click on the title of the movie to go to "/reviews/:id". Should a user click on their own review, they will be able to edit and delete their post using the link and button respectively at the bottom of the page. Of course, a user is not able to modify the reviews of others.

Finally, once a user has finished creating, reading, updating, and deleting movie reviews, they will be able to log out of the application with a link that is in the top right corner of the webpage.

What did the process look like?

I used a combination of a whiteboard and ripped halves of engineering paper taped to my wall to draft how I wanted my application to behave. I wrote out the fields that each model would have, sketched what each view looked like, and wrote a general to do list for the order in which I wanted to work on everything. Having a clear "sketch" for what I wanted my project to look like truly helped me stay grounded (and not bouncing around, editing multiple files).

Any takeaways after completing the project?

Similar with my CLI project, I had a plan before I started doing any coding. This helped tremendously, especially with all of the individual files that each had a specific role for this project.

I also did a good job of moving past any roadblocks or unknown bugs. With a combination of troubleshooting, googling, and past labs, there wasn't a particular piece of the project that stopped me much longer than 30 minutes to an hour.

I did better at making short, meaningful commits compared to the first project but this is something I will continue to be working on!

One thing I would like to do in the future would be to add the movie API that I used for my first project. It would be a nice to see the information from a particular movie, all the reviews associated with it, and have a list of movies the user would like to see in the future.

Thanks for reading!

Building my Movie CLI App

Antonio Carter — Sun, 07 Feb 2021 03:19:51 +0000

First project down!

It's that time, the time to close all of my tabs I mean. I've submitted a final draft of my command line interface application that takes movie data from the OMDb API and outputs it to a user. Out of all the projects I've done in the past, this one stuck out to me as it's the first thing I've built that interacts with the internet.

So, what does it do?

On startup, the user is prompted to enter a movie title or view their bookmarks. When a movie is entered by the user, they'll receive the title, release year, director, actors, and information about the plot.

From here, a user can choose to get the ratings for that movie, add it to their bookmarks, or not add it and go back to the state in the program where they can look up movies or view all of their bookmarked movies.

If the user chooses to view the movie ratings, a list of sources (Rotten Tomatoes, IMDb, Metacritic) as well as their associated ratings will be shown. The user will remain in this state of the program until they decide to add the current movie to their bookmarks or not.

Why make an app about movies?

I love movies! And I thought about how streaming services don't really show a Rotten Tomatoes score on their own interfaces. The premise of the app is to allow a user to not only get information about a movie, but also see their ratings in one place (no matter the streaming service that is being used). A user could even create a list of movies using their bookmarks and then compare the ratings to decide what to watch next.

Any takeaways after completing the project?

One positive was that I started planning before I started coding. I drew a rough flow diagram for how I imagined the program would go. I also did a good job of debugging along the way rather than coding several pieces of the program at once.

Although I had an idea of what I wanted to accomplish, I do wish that I had tried to look ahead for potential bugs/any edge cases. For example, I realized after the fact that I could bookmark a movie multiple times. If I had looked ahead at the beginning, I could have coded for that initially. Also, I need to do a better job of committing my changes more often.

One project down; on to the next one!

Why Did You Decide to Study Software Engineering?

Antonio Carter — Tue, 15 Dec 2020 10:37:16 +0000

What motivates you to stick with it?

Although I did some programming in college, I've only just recently started my path to becoming a software engineer. After thinking over this question myself, I realized that there are three main reasons that motivated me to make the leap into the field.

It's challenging.

In a good way, I find that software engineering is a challenge. While I was studying mechanical engineering, I learned how to analyze a problem as an engineer.

Understand the question. List any given variables. State your assumptions. Solve for what's left. Write up the solution and ensure that it passes a sanity check.

But when I took our only required coding class, I found that programming required a different kind of analysis: one that required logic and thinking like a computer. Although I ended that class with a D, I was hooked. Before that semester ended, I signed up for a computer science minor. Over the course of a year and a half, I exceled in those CS courses and proved to myself that programming was in fact for me.

I appreciate the challenge that comes with software engineering as well as the reward of getting your code to work how you envisioned it.

There's options!

The second reason I became interested in software engineering is because of the options you have for your career. One could be a software engineer for a tech or non-tech company, involved in everything from finance, biotechnology, or even paired with another discipline of engineering.

I like the prospect of having the option to explore different experiences within the umbrella of being a software engineer.

It's interesting!

This one just might be the most important. Having an interest in something not only helps you dedicate the time for it. It's especially useful whenever you hit that inevitable roadblock.

While working at the refinery, I find myself excited to go home and get back to coding. Spending a Saturday programming doesn't feel like a "waste" of a perfectly good weekend. In passing, I'm reading various subreddits related to software engineering to see if there's anything that may be helpful for me.

I believe that keeping the "why" at the forefront will help to maintain my focus, stay motivated, and reach my goal of landing that first software engineering job.

Thanks for reading!