React Redux Project
Since I have many years of retail experience I knew I wanted to build an application pertaining to that topic. I created a grocery shopping application that gives a user the ability to enter a name and browse through products and add them to a shopping cart. The shopping cart then gives the user a total and the ability to remove products from their cart.
I began building this application by using the create-react-app command to structure my front-end. This creates the skeleton for a react application. After running this command, I initialized my node package manager by running npm install. After installing npm I ran the command npm start to make sure my application was created correctly and would run properly in the browser.
After I had the application properly running I went ahead and built my Rails API. I began with my migrations to create the tables for users and products that I needed. After migrating and generating my schema I wrote some seed data. I seeded my tables so that I could play around with the data. Once my tables were seeded with some data I created my models for users and products. I initially created a model for a cart but ran into many ActiveRecord Association issues. The current models for a user and products have no current relationship. After creating the models, I built out the controllers and routes so that I would have endpoints to my API to access the data from the server. These endpoints contain JSON objects that my frontend will be able to access through the use of middleware from the Redux library.
After setting up my API, I started working on some simple components making sure they would properly render. Once I had a few components set up I wanted to retrieve my data from my API. I began by building out my reducers which manage and manipulate the globalized state of the application. A reducer is just a function that takes the initial state and an action as its arguments. The reducer uses the actions to determine what to do with the state. I built out three reducers, one for a user, a cart, and products. I then used the combineReducers method from the Redux library to combine all of my reducers into one rootReducer.
Once my reducers were set up I needed to create my store or globalized state. I used the createStore and compose method and the Provider object from react-redux and Redux to build the store. The Provider object makes the Redux store available to any nested components. To finalize the setup of my store I created a const called store and used the createStore method passing in my rootReducer and the compose method so that I could use some middleware and the Redux DevTools. Passing in store to the Provider then gives my application access to the Redux store.
Since the reducers take in an action as it’s second argument, I needed to create some actions to determine what changes to make to the state. I built actions for the products and for the user. I created three actions for products which include fetchProducts, addToCart, and removeFromCart. I also created an action for a user which is findOrCreateUser. All of these actions use dispatch to dispatch the action to trigger a state change.
Next I needed to retrieve some data from my API. Using the Redux middleware thunk I was able to make a fetch request. Thunk allows a way to dispatch an action to load data, make a request to the API, wait for the response, and dispatch another action with that response data.
Once I was able to retrieve data from my API I could then store it inside of the store. When the application is loaded the data is automatically retrieved through the use of a component lifecycle method called componentDidMount which means whenever the component mounts to the DOM run the lines of code inside of the function.
I used the Router object from the react-router-dom library to create a navbar in my application. Inside of the Router object I wrote Navbar objects that point to an exact path a user can visit and renders a corresponding component. Inside of the NavBar component I used the NavLink object from the same library to build the links to those components.
I setup two container components, one for products and one for cart which would render another component inside of it. I then passed props to those components using the store with the help of the connect method in the react-redux library. The connect method establishes a link between the component and the store to access data. Another helpful method to pass props to a component is mapStateToProps which allows the globalized state to be stored as props in the component so that they can be passed along to a child component.
Putting together all of these components I was able to build a very simple and easy to use shopping application. A user can add products that are retrieved from an API to their cart inside of the store and then can also be removed. Inside of the cart component a user is also able to see the total price of the entire cart. There is currently no option to checkout but maybe in the future I could implement a fake checkout to make the application even more robust.
