Typescript & React Redux: A Quick Setup Guide (2022)
A quick setup guide to Typescript & React Redux through the example of a counter.
Step One: Add React Redux to your Project
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 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
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
We recommend you apply the Provider at the index.tsx, a sample can be found below:
Step Five: Read & Write a Redux State
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.