Typescript & React Redux: A Quick Setup Guide (2022)
![Oscar de la Hera Gomez](https://www.delasign.com/CDN/headshots/profile.webp)
![Typescript, react & redux symbols](https://www.delasign.com/CDN/images/Typescript-React-Redux-Hero%403x-100.webp)
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](https://www.delasign.com/CDN/images/Typescript-React-Redux-Add-React-Redux%403x-100.webp)
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.](https://www.delasign.com/CDN/images/Typescript-React-Redux-Slice%403x-100.webp)
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.](https://www.delasign.com/CDN/images/Typescript-React-Redux-Store%403x-100.webp)
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.](https://www.delasign.com/CDN/images/Typescript-React-Redux-Provider%403x-100.webp)
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.](https://www.delasign.com/CDN/images/Typescript-React-Redux-State%403x-100.webp)
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.