Final project on Reactjs w/ Redux with Rails API
The end is finally here! It’s been what feels like a long journey with Flatiron School. It’s been nearly a year since I first stepped foot inside the Manhattan campus. I am ready to close this chapter and begin the next phase — job search!
Before I get ahead of myself, I guess I should share a bit about my final project. This blog will be a high level overview of how I went about to create my app and the things I learned along the way. Since this is the final project I will focus more on the Reactjs w/ Redux portion. This project encompasses Ruby on Rails API for the backend and Reactjs w/ Redux for the frontend. I’ve incorporated CSS and Material UI for the look and feel.
This application, a Todo App, allows a user to create an account or login if already a user and create lists. Each list can have as many todo items as needed. Each item can be marked off as complete and deleted too. Now I know a lot of people start off with creating a simple todo app when learning a new language. However, time management and staying organized is essential as a wife, a mother, a student, etc. For me, keeping list is useful and practical.
Demo: https://www.youtube.com/watch?v=hcjrj4w5e4c
Let’s get started…
Rails API
I started with creating the rails backend API with the following command:
rails new back-end-todolist-app -api -T — database=postgresql
In the backend, the database has three tables — User, List, and Item. A user has many lists. A list has many items and belongs to a user. Items belong to a list. Be sure to run the following commands:
rails db:create && rails db:migrate
I’ve set up the models and controllers as well — see below.
Here are my routes:
Authentication & Authorization
As part of implementing an authentication, I’ve applied JSON Web Tokens (JWT). It is stateless and token-based authentication. Thus a user’s information is not stored in the database but is a token. A token is sent along with every authorized request from the client(browser).
Here is my AuthController, so an authenticated user can access their lists.
The Application Controller contains methods for authentication and authorization with JWT. These methods become accessible to the other controllers by way of being in the Application Controller.
A bit about the methods here in the Application Controller. As mentioned above, these methods are essential to JWT. Before these methods are ran, a macro before_action :authorized has been placed in several of the other controllers. If a request has been made to that macro, then the authorized method in the Application Controller will be called first. After the authorized method is called, it will start a chain of events and work its way up through the methods. Essentially, a user must have logged in, in order to create, edit, or delete a todo list because the macro before_action is added to specific controllers.
This flow chart below is a simple representation of how JWT authentication works.
Reactjs w/ Redux
A high level overview of Redux → the redux store dispatches an action to the reducer. Then the reducer uses that action to make changes to the state, which in turn re-renders the new data for that component.
There is some basic setup with react-redux, which I will just briefly mention below.
To install react-redux in your react application, run the following: npm install react-redux. React-redux provides <Provider /> allows the rest of the application to access the redux store.
React-redux also provides a connect function, which allows the component to connect to the redux store. Be sure to include import { connect } from ‘react-redux’; in your components that incorporate redux.
App.js is the entry point into my Todo App. App.js renders the homepage, user login, user signup, and mainComponent. The homepage renders the the user who’s logged in. The user login page displays the form that includes username and email in order for a user to login. Once the user clicks the “enter” button then an action is dispatched to the redux store. The user signup page renders a form which includes username, email, and password. The mainComponent renders both listform and alllists. The listform renders the submit for the list. The alllists component displays all the lists for a user.
Redux store
The redux store is where all the state is held for the application. In order to change the state, an action must be dispatched. The store is an JavaScript object. In order to create it, pass the root reducing function to the createStore.
Redux action
An action is a plain JavaScript object that contains the type field. An action is similar to an event that describes something that happened in the application. The type field provides a description of the action and is a string. Below you can see dispatch calls and action with type: “LOAD_GET_CURRENT_USER”.
Redux reducer
In createStore, I passed the reducer as an argument. Reducers are functions that take in current state and an action, both as arguments. The reducer returns the new state. Every reducer starts with some initial state. (state = initialValue, action). Action is a JavaScript object that has a type property that describes an action. Should you need to edit the data in the store, you can not directly change it. There is a process that takes place. First, dispatch an action to the reducer. The reducer takes an action, then changes the state based on the action. Following this, state can be updated.
Redux thunk
Redux thunk is middleware that lets you call action creators that return a function rather than an action object. The returned function receives the store’s dispatch function, thus dispatch can have multiple actions. The actions include having the state in a loading state and the other is to update the store with the returned data.
Redux-Thunk needs to be installed with the following: npm install — save redux-thunk. Index.js is where redux-thunk is imported into the createStore as arguments. The middleware is included as such: import thunk from ‘redux-thunk’.
While this todo app is far from perfect, it does provide basic CRUD functionality. I plan to implement more functionality, such as adding a calendar feature.
Please provide comments below.
