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

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

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 05/02/2022 at 17:35
Last Updated on 05/02/2022 at 21:29
Typescript, react & redux symbols

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

Download Project.

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.

Download ProjectRead the full ReduxJS Toolkit Tutorial

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.

SubscribeInquireView All PostsView All ServicesView All Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe