Project 5: React/Redux Rails

My final Flatiron School Online Software Engineering Bootcamp capstone project, titled ReOrder, is a fullstack web application utilizing a React/Redux JS frontend and a Ruby on Rails API backend. The function of this app is to allow a user to create a list of items, which have a name and a desired amount (called a ‘par’) and an amount ‘on hand’ which is input by the user. The app calculates the difference between the par and the on hand amount of each item and displays the ‘amount needed’ of each item dynamically as the on hand amount is entered by the user. The amounts needed of each item are then compiled into a “order” which is a list showing the item names and the amounts needed of each item. The user is then able to give the order a name and a delivery date, and then save the order to the database.

The main purpose of building this application was to gain insight into working with React and Redux which, as usual, I’d been shown how to do but hadn’t actually done yet. The first challenge is always sorting out where to start and when to start applying all of the new things I just learned. Do I build components first? What dependencies do I need to install? What about routing, should I plan that out first? How do I initially present the app to the user? What exactly is Redux again? Luckily our cohort lead always leaves us with a final walkthrough of how to get our project rolling, so, as usual, I started there.

Building out the Rails backend was the first step. Easy enough to do with the Rails API generator and scaffold. This app is pretty simple, only requiring 2 models (and tables), Items and Orders. Most of the work on the back end actually involved making the app ready to be deployed on Heroku. This is a whole can of worms that is basically separate from the objective of the project, so I won’t get into it here but I followed this walkthrough: https://blog.heroku.com/a-rock-solid-modern-web-stack

The real work was building the frontend. To start, a React app was created inside of my Rails API, inside of a client folder (create-react-app client). This builds out the basic framework for a React app. React introduces is use of Components into JavaScript, which utilize “state” as a way of handling and dynamically presenting data inside of the DOM. Anytime the state of a React Component changes, that Component is re-rendered and able to present new data while any other unrelated Components, who’s state hasn’t changed, remain the same.

The other half of the frontend is Redux. Redux modifies React by creating a “store”, which is essentially a global location where state, which has been extracted from React components, is kept. Redux makes changes to its store by dispatching actions to a reducer. The reducer is a switch that makes changes to its state (and therefore the store) based on the ‘type’ of action dispatched to it. React components access the Redux store and these dispatch functions by mapping its state to props (mapStateToProps) and mapping dispatch to props (mapDispatchToProp) by exporting a Redux ‘connected’ component. The connect function is imported from Redux and allows a component to send its state to the global store. Dispatch actions can be directly imported and connected: import { doAction } from ‘./actions/index … export default connect(mapStateToProps, { doAction })(NameOfExportedComponent)

What I’ve discovered is that using Redux makes your Components more independent and flexible than they would be otherwise. Without Redux, in order for Components to share state (aka data) a relationship chain is required, which eventually can become complicated and unpredictable. With Redux, a Component is able to reach out to the store and access that data as if the store were a database.

With this capability in mind, Components are then structured into Container and Presentational components. Container components manage data, how things work and are usually stateful, whereas Presentational components deal with how things look and the actual rendering. Presentational components are stateless ideally, accessing data through props passed from a Container component.

Development of this app also included installing Thunk middleware to allow asynchronous communication with the Rails API, client-side routing using react-router, and styling with React Bootstrap.