Skip to content

Exercise 07 : Redux Shop App

Introduction

You will create a small Shop React application which uses Redux and/or Redux Toolkit.

Image 01

Create a new project and install needed libraries

Create project redux-shop-app and install Redux libraries and Axios.

Shop items data

You can use your own store items (images, json, etc..) or just use https://fakestoreapi.com.

Redux

Create a Redux actions, deducers and store OR use Redux Toolkit Slides.

You will need actions to store all loaded products, add and remove product to/from shopping cart. Reducer should handle all of those actions.

Product

Create a product function, which renders a one product from the loaded data.

Products

Create a products function, which loads store data with Axios when the application launches. Use created action to store loaded store items to Redux Store. Loop throught all the loaded products and use above Product function to display products in UI.

ShoppingCart

Add selected product to shopping cart. The product must be able to be removed from the shopping cart.

Push exercise 07 / Redux Shop App to GitLab

Test your application in web browser, take screenshots and commit/push your project and screenshots back to JAMKIT/GitLab. Remember move your exercise/issue ticket from Doing to In Review in Issues Board and write your learning comments to issue comments.

Save screenshots to redux-shop-app folder.