Typescript & React Redux: A Quick Setup Guide (2022)

Oscar de la Hera Gomez
Typescript, react & redux symbols

A quick setup guide to Typescript & React Redux through the example of a counter.

Step One: Add React Redux to your Project

React & Redux Symbols

There are two ways to add React Redux to your project:

  • Create a new Project with redux installed
  • Add Redux to an existing Project.

A / Create a new Project with Redux Installed

Redux + Plain JS template

npx create-react-app my-app --template redux

Redux + TypeScript template

npx create-react-app my-app --template redux-typescript

B / Add Redux to an existing Project

Add React Redux

If you use npm:

npm install react-redux

Or if you use Yarn:

yarn add react-redux

Add ReduxJS Toolkit

If you use npm:

npm install @reduxjs/toolkit

Or if you use Yarn:

yarn add @reduxjs/toolkit

Step Two: Create a Redux State Slice

A redux symbol with Slice written around it.

A slice can be considered as a place that you can define the state variables are; what the initial state of those variables is as well as the actions that can be used to update it. A sample "counterSlice.tsx" can be found below:

Step Three: Create a Redux Store

A Redux logo with Store written around it.

Add a store for your project at your preferred location, a sample store can be found below.

Step Four: Add the Provider to the App

A Redux symbol with Provider written around it.

We recommend you apply the Provider at the index.tsx, a sample can be found below:

Step Five: Read & Write a Redux State

Two Redux symbols one with READ and one with WRITE written around it.

The following sample component demonstrates how to read & update a redux state, using a counter example.

Any Questions ?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.

delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details