Building Shopping Cart With Reactjs and Redux

Building Shopping Cart With Reactjs and Redux Part 1

In this tutorial we will build a shopping cart demo using Reactjs the javascript framework and Redux store manager, i will also using the react router to navigate between the cart and the products pages.

 

 

Requirements

  • Knowledge with javascript
  • Knowledge with Reacjs and redux

 

In this tutorial we will create two pages, the first page contains a list of products and the second page is the shopping cart. To facilitate things i am not going to do any server side logic so i suppose that the products and the cart will be fetched from Redux store only.

 

Let’s start by creating a new React app with this command:

Next cd into shopping-cart/ directory and install those dependencies:

I will be using the react-router to navigate between pages and redux and react-redux for the store management.

Now run this command to start our app:

This will open and watch the app in a browser window using a random port for example http://localhost:3000

I will be using bootstrap so include the cdn in file public/index.html like this:

public/style.css

 

Preparing Components & Store

We need to add the required components and store for the app. The components and store in Reactjs located in the src/ directory so open the src/ directory and create those directories and files:

src/

    — components/

        — cart/

                   — Cart.js

                   — Item.js

        — Navbar.js

        — Product.js

        — ProductList.js

    — store/

          — actions/

                         — cartActions.js

          — reducers/

                          — cartReducer.js

                          — productReducer.js

                          — rootReducer.js

    — App.js

    — Index.js

 

As you see in the directory structure above i have created two directories the first for the components and the second for the store. For the components we have components that display a list of products those are ProductList.js and Product.js. The cart components will be in the cart/ directory which is Cart.js and Item.js

For the store i created two directories one for the actions and the second for the reducers, as with any other React app i separated the reducers to product reducer and this in productReducer.js and a cart reducer in cartReducer.js and combined them with the root reducer located in rootReducer.js

 

Next let’s add the components code with dummy content and applying the router, in the next section i will go on by implementing the Redux.

src/components/Product.js



src/components/ProductList.js

src/components/cart/Item.js

src/components/cart/Cart.js

src/components/Navbar.js



src/App.js

The above code is a blueprint of what we will go to implement with redux, if you run the app you will see the products in the home page and you can navigate to the cart page by clicking on the top right icon, now we need to update those items to be coming from redux, we will implement this in the next section.

 

Applying Redux Store

By using redux we are able to store the products and cart items in the store and we can access them in the products and cart pages respectively for display. Also we need to enable the user to add products to cart, remove products from cart, update product quantity, we will accomplish this using the action creators and reducers.

 

We need to add the Redux store to our app so Update src/Index.js as follows:

As shown i have imported the createStore and Provider dependencies, then i create a new store instance using createStore() passing in the rootReducer, finally i updated the render function to include the <Provider /> component as the root component this makes the entire app to be aware of the store and reducer.

If you run the app you will see an error telling that the root reducer is missing don’t worry we will fix that below.

 

Displaying products

The first step is to display the products so open and modify src/store/reducers/productReducer.js

In the above i have added an initial state of of four products in the store, in a real world project those products will come from server side Api. The product reducer is just a function that returns the state.

src/store/reducers/cartReducer.js

src/store/reducers/rootReducer.js

The root reducer combine the product reducer and cart reducer you can of it as doing a merge of the two reducers each with a distinct key so for example to access the products in any component you can use state.product.products.



Now modify the product list and product components as follows:

src/components/ProductList.js

src/components/Product.js

To access the state in the components we have to create a function that map the state into props like the function i have added in ProductList.js called mapStateToProps().

mapStateToProps() function takes the state as a parameter and it should return an object with the props we need to access, in this case we need to access the products.

Then we need to pass that function to the component, to do this we use the connect() function from redux. The connect() function return a higher order component which means it injects additional props to the component ProductList. Now you can access the products from inside the component using this.props.products

Finally i looped through the products using javascript map() function and in each iteration i return a <Product /> component passing in the product as a prop like this:

Now refresh the browser you will see the real products coming from the store.

 

Continue to part 2: Handling Cart

Share this: