Redux toolkit with Typescript
Published: 2022-04-28 13:13:16

---
title: Redux toolkit with Typescript
published: true
date: 2022-04-28 13:10:06 UTC
tags: 
canonical_url: https://bukss.hashnode.dev/redux-toolkit-with-typescript
---

Why should you consider using redux toolkit with typescript? Typescript is used to apply types to the code you write in Javascript. One of its benefits is it helps in spotting bugs early, even before running your code. Code management and refactoring are made easier with typescript. IDEs are able to offer more assistance like providing accurate suggestions and autocompletion when using typescript.

In this article, we are going to learn how to use redux toolkit with typescript. We will be learning what each additional typescript code means. The store structure will be simple, so by the end of this article, you should be able to understand how to integrate typescript with redux toolkit.

This article assumes you have a basic knowledge of typescript and how to set up a redux toolkit. A [code sandbox](https://codesandbox.io/s/headless-breeze-88kcv5?from-embed) of the project is provided at the end of the article.

> To get started with typescript you can check out [typescript docs](https://www.typescriptlang.org/docs/)
> 
> You can check out [my article](https://dev.to/bstella/a-beginners-introduction-to-redux-toolkit-1mao) on how to set up a redux toolkit.

## Store

Let's look at the store (index.tsx) first. ![code.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651096651693/UD-pkN0dW.png)

We have added two types here. let's see what they do.

`export type RootState = ReturnType<typeof store.getState>`: `RootState` should be a type with all the values in our state. `store.getState` gets all the values in our state. To refer to the type of our state, we use the typescript operator `typeof`. `ReturnType` takes a function type and produces its return type.

Therefore `RootState` results in a type with the variables in our store

![code4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651147020960/wth5fmwvL.png)

`export type AppDispatch = typeof store.dispatch`: Using `typeof` operator we can refer to the type of `store.dispatch`. This sets the type of our store dispatch method.

> Inferring these types from the store itself means that they correctly update as you add more state slices or modify middleware settings.

You will notice we are exporting both types, which means we will need them later in our application.

## Slices

![code1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651098952614/qmCU59dJr.png)

`export const authSelector = (state: RootState) => state.auth`: `authSelector` is a function that returns a selected part of our state in this case, `auth`. The `state` type has been set to `RootState`, which is a type of all the values in our state. It comes with a nice auto-completion which is useful in knowing the variable available in the store.

![code5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651147627666/nmzuE904y.png)

## Hooks

All that remains is to use it in our component. We will need the useDispatch and useSelector hooks. Let's also add types to them.

![code2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651099120714/uzdSd2uFw.png)

`export const useAppDispatch = () => useDispatch<AppDispatch>()`: We have set the type `useDispatch()` to our previously exported `AppDispatch` here.

`export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector`: `TypeUseSelector` is a type from redux, together with our previously exported `RootState` we used it to set `useAppSelector` type.

**What have we done?** Instead of using useDipatch and useSelector, we can now use useAppDispatch and useAppSelector in their place.

**Why have we gone through the trouble of doing it like this?** Redux docs brilliantly explain this [here](https://react-redux.js.org/using-react-redux/usage-with-typescript#define-typed-hooks)

With that, we can use them in our various components. which will look like this

![code3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651144899959/Gtoty8HrX.png)

`const { isLogin, userName } = useAppSelector(authSelector)` : `authSelector` points to `state.auth` which contains two variables. Using object restructuring, we can get those variables we need.

And we are Done🥳🥳. Here is a sandbox for what we have done.

[https://codesandbox.io/embed/headless-breeze-88kcv5?fontsize=14&hidenavigation=1&theme=dark](https://codesandbox.io/embed/headless-breeze-88kcv5?fontsize=14&hidenavigation=1&theme=dark)