The triple R (Rails + React + Redux) milestone.

For my last Flatiron Portfolio Project, I have built a simple shopping cart, which retrieves data from a custom Rails API and renders both stateless styled components and stateful ones, with the help of a couple of hooks and of course, the popular state management JS library known as Redux.

Before we jump into the completed requirements, I’ll go through some details about the main technologies used during the process.

Why React?

— For better structuring and separation of concerns on Single Page Applications, reusable components turn this task as simple as building a puzzle into a web application. With its whole popularity as the most used JavaScript library on the last years, more and more React-related libraries for both client and server side rendering are making developer’s lives easier with faster results.

Why Redux?

— Passing state props from one component to another, inside a hierarchy tree, may become quite repetitive, especially on a large application. This is when the state management library Redux was created as solution a for this issue, making the data flow transparent and predictable.

It centralizes the whole application’s state into what we call a Store, which holds global state and it’s at the top of the application’s hierarchy. This way, these states can be accessed through any components below it.

The state flow provided by Redux are separated into these following steps:

1 — The components/containers dispatch/trigger an action;

2 — Actions: It’s where we decide WHAT to do with our data. On this case, with our API endpoints;

3 — Reducers: Functions that receives information about the previous states and ACTIONS to apply on them. And then, returning back a new state value;

4— The reducers then updates our store, which contains the state and defines the UI behavior.

This way, our store behaves like a state management database. Whenever we need a state to be changed, we can get it from the store, making it independent from the other components.

With that understood, here’s how I have followed the project requirements:

• The code should be written in ES6 as much as possible.

— Modern ES6 features was used on this project, as for instance, the use of template strings interpolation and arrow functions.

• Use the create-react-app generator to start your project.

— The method I have used to scaffold a basic React project structure with its necessary dependencies, although some unnecessary default boilerplate was removed.

• Your app should have one HTML page to render your react-redux application.

— Under the public folder on the client side is where my index.html contains the ‘root’ ID, being called on the highest hierarchical level on the application: index.js.

• There should be 5 stateless components.

— Product (which takes props with some minimal logic);

— Rating (with basic styling imported from the font-awesome library);

— Header, Button and Footer (CCS-in-JS styling using the styled-components library).

• There should be 3 routes.

— Products index for displaying multiple products on the homepage;

— Individual Product’s id route;

— Cart route.

• The Application must make use of react-router and proper RESTful routing.

— Utilized “react-router-dom”: “5.2.0” library for routing.

• Use Redux middleware to respond to and modify state change.
• Make use of async actions and redux-thunk middleware to send data to and receive data from a server.

— applyMiddleware(thunk) on this case, returns an anonymous function (createStore). The return is now executed with createStore:

• Your Rails API should handle the data persistence with a database. You should be using fetch() within your actions to GET and POST data from your API - do not use jQuery methods.

— Starting off from the API, it contains 2 models: Product, which has_many :reviews, and Review, which belongs_to :product.

— As for the HTTP required methods, I have included both GET (for fetching the products from the API) and POST (for saving a product’s review) from the accessed API’s endpoint:

• Your client-side application should handle the display of data with minimal data manipulation.

— “onClick” and “onChange” are the only few events for data manipulation on this case.

• Your application should have some minimal styling: feel free to stick to a framework.

— For this app I have used both custom CSS as well as the Font-Awesome, Styled Components and React-Reveal libraries.

That was quite a bit to cover on this project, but also essential material when it comes to understanding how a full-stack application with state management works under the hoods.

Here’s the repository for more details: https://github.com/Roeck/Karted

Pull requests for contributions are always welcome! I’m open to turning this closer to a real e-commerce project anytime.