Redux Fundamentals of React in TypeScript

Redux allows you to manage your app’s state in a single place and keep changes in your app more predictable and traceable. It makes it easier to reason about changes occurring in your app. But all of these benefits come with tradeoffs and constraints. For more information, check my website: https://www.kmeeraj.com

Meeraj Kanaparthi

Download Code (github):

GitHub - kmeeraj/reduxExample at master

Please check this video for the content below:

Redux is most useful when:

1. You have large amounts of application state that are needed in many places in the app
2. The app state is updated frequently
3. The logic to update that state may be complex
4. The app has a medium or large-sized codebase, and might be worked on by many people
5. You need to see how that state is being updated over time

Please follow this blog to get more information:

General | Redux

Why use Redux? A tutorial with examples - LogRocket Blog

Welcome to this new tutorial about the Redux Fundamental of React in Type Script. I have followed Redux website to form this tutorials.

Redux Fundamentals, Part 3: State, Actions, and Reducers | Redux

How to Use Redux in Your React TypeScript App

Let us look at the steps to understand redux in React. First step is to create React application, use the following command to build the React app.

yarn create react-app redux-app -- template typescript

One check the different ways to create react app in the following link:

Getting Started | Create React App

Open any editor and open the folder where we have created react application.

Run following command to install redux react libraries

yarn add redux react-redux redux-thunk

Run following command to install type of redux react libraries

yarn add -D @types/redux @types/react-redux @types/redux-thunk

In the terminal provided by editor, run this command

yarn install

create types in file as types.d.ts

Notice in the types we also defined course action and package action. In the types along with object type we define action type and one dispatch method.

create action types in action types file as follows

create action creator in action creators file as follows

In the action creators, notice that we have implemented the simulated HTTP service to mock the HTTP call and here we are using dispatchType function to return action object.

Create reducer as given below

In the reducer, just for demo purpose we create a initial state object and pass it to reduce method.
This reducer method is very important method that take action and state and update the state for appropriate action.

We need redux-thunk to handle asynchronous code.

I have used blue print js in this website (https://blueprintjs.com/) to build components. This gives flexibility in css to design UI rich component.
To install this, we need a command to run following command

yarn add @blueprintjs/core

If you want to import any component say Button, do the following in the component:

import { Button } from “@blueprintjs/core”;
<Button intent=”success” text=”button content” onClick={incrementCounter} />

Add this to import blueprintJS css

I have created a component called Add Course as follows

I have created a component called Course as follows

I have bind the delete button to update the state by remove an object and add button to update the state by adding an object

Once you run the application, you can see that the Course can be added and removed.

Here we can establish the state and update the state basing on the action type in reducers. We are communicate the state of the UI to backend using the action creators with the help of redux we are Dispatching the Backend functions and updating the store (state) of the UI.