Build a React Redux App

Home page of my portfolio Application

This blog will be about my final project with Flatiron school. I will go over the steps to create an app using react-redux, HTML, JS for the frontend and Ruby on Rails for the backend.

What is Redux?

React — A JS library that helps us to divide up our app into multiple components but doesn’t clearly specify how to keep track of the data(aka State) and how to deal with all the events(aka Actions) properly.

Redux — A complimentary library to React that provides a way to easily keep the data(State) and the events(Actions).

Essentially Redux allows us to build React app as you are but delegate all the State and Actions to Redux

Backend API

1. First, create a project folder with the name of your app. In this folder, run:

rails new Your-App-Name-api --api --database=postgresql

This is will create your backend structure.

2. Then, created your resource(s) using the scaffold generator:

rails g scaffold resource-name attributes:string ...

This will create your controllers, models, resources, tables. Make sure your table looks the way you want and run ‘rails db:create’ to create your database and ‘rails db:migrate’ to create your schema.

3. Update your gemfile by uncommenting gem ‘rack-cors’ and adding pry if you are planning to use it.

4. In your cors.rb file in (config > initializers), uncomment the function and add ‘localhost:3000’ to the origin’

5. Update the port in puma.rb (line 18) in your config folder to port 3001 so that the frontend and the backend run on different ports.

6. Seed data if needed

These are all the steps you need to start a project, you only need to come back to it if you need to add another resource, add validations and associations to your models, and update the controller as needed.

Frontend

1. Create the frontend in the main folder of your project by using the command:

create-react-app your-app-name-client

2. Add your dependencies that you need in order to wire in your redux store with react:

yarn add redux redux-thunk react-router-dom react-redux

3. Create your folders inside your src folder. By convention, you will find a components, actions and reducers folder.

4. In your index.js, import your Provider from ‘react-redux’, createStore and applyMiddleware from ‘redux’ and thunk from ‘redux-thunk’. Also import your first reducer that you are going to create in the next step.

5. To create your reducer, you will need to define an initial state, which will have your model stored in an array and a loading state which will equals to true.

Create a constant variable that will take in the state as the 1st argument (which by default equals to the initial state) and an action.

This constant will have a switch of an action type which for now will default to the state.

Initial set up for the reducer

6. Back to index.js, create a constant store that will create a store using your reducer as the first argument and applyMiddleware as the second that will that in an argument of thunk.

constant variable store to create the store

In your DOM, render the Provider that will provide the store to all the components wrapping your App component. Redux is completely wired in.

Providing the store to the components

7. Create the components. In my case, I created a HomePage, AboutMe, NavBar, Footer, Project (Form, Index and Project), ErrorPage and a Resume. Very handy shortcut extension provided by VsCode is to type ‘rce’ and it will fill up your component where I only had to delete the “export” in front of the class.

8. In App.js, delete everything inside the <div> and also the 2 imports at the top of the file. Import BrowserRouter alias Router, Switch and Route from ‘react-router-dom’. The Router will wrap everything inside the render() return {}. The NavBar will render at the top of the page, the footer at the bottom, and inside will be the Switch, wrapping all the routes.

Structure of the app.js render() return {}

9. Now is time to work on the model, and get the information from the redux store. In app.js, import connect from ‘react-redux’ to connect to an action that I called getProjects. Also we will need to bring the loading state here with the mapStateToProps constant.

connect in app.js

10. In the action folder, export a constant with the given name, in this case, getProjects. This constant doesn’t take any argument, and return a dispatch (because we use the redux middleware) and then will dispatch a loading state which in this case will be a type of “LOADING”. We then are going to fetch our backend API, which will first return a promise object, then a response and finally a data that will be an array of projects which I am going go dispatch a with a type and an action.

action to fetch the date to the backend API

11. Update the reducer so that it communicates with the action, which will first trigger the action of LOADING, and then get all the projects.

reducer to communicate with the actions

12. The component will then need to be mounted with a “ComponentDidMount” function in the app.js. At this point we have our projects loaded.

Component mounts when the page loads

13. The final step to render the projects will be update the index.js and project.js in order to render the projects.

• First connect Index to the redux store which will return all the blogs.
• In order to map the projects in in the index, update the project.js file declaring a constant passing in the attributes and setting it to the props that we will then render as desired.
• Back in Index, import project, and declare a constant that will map over the projects creating a project object that will need to render. At this point the projects render on the page.

Index.js

Project.js

Conclusion:

This was a fun but very challenging project. It’s really important to understand the flow of the code and how the files communicate wit one another. In order to make this project an official portfolio, I will need to implement a user model where I would be the admin so I can be the only one able to add and delete project.