React Web App with TypeScript and Redux — a guide for a quick start

Suppose a scenario where we need to develop a web app. We have no other option but to use React with TypeScript, And Redux. For CSS we need to set up Tailwind but wondering how/from where to start all these. How is it possible? Then this article will provide us the step by step guide and relieve our stress (if any)! So, let's begin.

Note: You can go through this article for step by step process or you can start playing with the code from this complete project: https://github.com/mukitul/react-learning-app-with-redux

Image 1: Let’s Begin

Prerequisite

node.js (minimum 14 or above), IDE: VSCode or WebStrom (VSCode is free!), Git, a basic understanding of ES6, RxJs (for a quick start check this repository: https://github.com/mukitul/javascript-es6-rxjs), a basic understanding of Tailwind CSS (or at least how to search and copy!!)

Contents

1. Final Output

2. Component Hierarchical Design

3. Folder Structure

4. Start Building The App

5. Bonus

6. Conclusion

7. References

1. Final Output

A simple dashboard page of a dummy eCommerce site —

Image 2: A simple dashboard

We will consume a fake API from https://fakestoreapi.com/ and show the response on the browser like the image above. A web app has a dashboard like the above image will be the final output.

2. Component Hierarchical Design

Before jumping into the code, let's take some design decisions regarding component hierarchy. We know React is a Single Page Application (or SAP) i.e.: one index.html page renders different components based on different routes. What type of hierarchy we follow while building this web app is shown below —

Component hierarchy

In the above hierarchy HomeScreen.tsx as a child of MainLayout.tsx renders HomeComponent.tsx. The MainLayout is rendered by App.tsx and finally index.tsx renders App.tsx and set the final view in the root element of index.html.

In this example project, we will implement this hierarchy.

3. Folder Structure

We will try to follow the below folder structure for this project

Project folder structure

Also, create a folder named styles inside src and move index.css from src to styles.

4. Start Building The App

Step 1: Initiate React-TypeScript Project

Create a React app by using this command:

npx create-react-app react-web-app --template typescript

This command will create a folder named react-web-app. Inside the folder, you will find the required files and folders of this TypeScript-based React app.

Step 2: Install Required Packages

Now we will install the required packages in this folder (react-web-app). For this, we need to open the folder using any terminal or we can use IDE’s terminal. Now execute the below commands in the terminal one by one -

npm install axios
npm install history
npm install redux react-redux
npm install redux-devtools-extension
npm install rxjs
npm install redux-observable
npm install @reduxjs/toolkit react-redux

Step 3: Setup Tailwind CSS

Setup Tailwind CSS by following the instructions from their official website: https://tailwindcss.com/docs/guides/create-react-app

Step 4: Create Reducer/Slice

We will define the initial state for keeping data of all products, define actions, and define the different states of the initial state for different actions. We will do all these codes using library reduxjs/toolkit. All these steps are referred to as slice while we use reduxjs/toolkit. The sample code is given below —

File — allProdctSlice.ts

As we are using TypeScript, to make things typed — we should define an interface (like AllProductStateInterface.ts) mentioning the type of each property of the initial state object. You can check the GitHub repository for details.

Step 5: Create Epic

Now we will define an epic for this project. An epic is a core primitive of redux-observable. An epic runs alongside a normal redux dispatch channel. When we dispatch an action relevant reducer received the action and does the task that is defined in Step 4. After the reducer finishes its job, the relevant epic listens to the action and does what is defined in the epic. Epic takes a stream of action as input and returns a stream of action. Let’s define an epic for requesting all products. This epic will be triggered when getAllProductRequestAction is dispatched and processed by the related reducer. Inside the epic, we will basically do an API call and the API for getting all products is: https://fakestoreapi.com/products

This API call either be successful or fail. If successful than we return getAllProductSuccessAction else return getAllProductFailedAction. The sample code is given below (for more clarity please check this repository) —

File — allProductEpic.ts

Step 6: Create Root Reducer

Now we will create rootReducer function, this function returns an object containing all the reducers of our project. Currently, we have only one reducer, so we mention only that reducer like this -

File — rootReducer.ts

Step 7: Create Root Epic

Now we will create rootEpic by combining all the epics of our project. For this, we will use the combineEpic function redux-observable. As there is only one epic in this project, we mention only that. The sample code is given below —

File — rootEpic.ts

Step 8: Configure Redux Store

Now we will configure the Redux store. This is a plain and simple step. We will tell redux about all our epics and reducers by using rootEpic and rootReducer respectively.

File — AppReduxStore.ts

Step 9: Connect React with Redux

Now we need to connect the Redux store with React app. For this, we use Provider from the react-redux package and modify the index.tsx file like below -

File — index.tsx

Step 10: Create Different Components

We are done with our Redux setup. Now we will create our components — HeaderComponent, FooterComponent, MainLayout, HomeScreen, and HomeComponent. For more detail about the components please check the repository.

Step 11: Setup Routes

Now we will set up our routing. Defining route means, when to show (or render) which component, i.e.: when the user hits /home or / in the browser address bar will view HomeComponent. We will set up the route in App.tsx file. The sample code is given below —

File — App.tsx

Step 12: Others

Some best practices have been followed while creating this app like a separate file for setting up axios client, a separate file for utility functions, no use of direct strings in the code — used string from constant file while needed, etc. You can observe this better when you clone this project's repository and follow the coding pattern. A tip for code walk-through is to start code walk-through from App.tsx file!

5. Bonus

To know about different states in the Redux store of the web app, you can use an extension of chrome — Redux Dev Tools. Install this extension to your chrome browser and view different states in the Redux store. This extension will make your life easy!

Image 2: Redux Dev Tool

6. Conclusion

That's the end of this article. Hope you get a quick start on React with Redux and TypeScript. Fork and play with this repository: https://github.com/mukitul/react-learning-app-with-redux for better understanding.

Happy Coding!

Hope, you have gathered some brief idea on how to use TypeScript in React app, how to set up Redux using Redux-Toolkit and also how to set up Tailwind CSS.

7. References

1. React official guide: https://reactjs.org/docs/getting-started.html
2. Redux official guide: https://react-redux.js.org/introduction/getting-started
3. Epic official guide: https://redux-observable.js.org/docs/basics/Epics.html
4. Tailwind official guide: https://tailwindcss.com/docs/installation
5. Fake API official guide: https://fakestoreapi.com/