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 of the project is provided at the end of the article.
To get started with typescript you can check out typescript docs
You can check out my article on how to set up a redux toolkit.
Store
Let's look at the store (index.tsx) first.
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
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
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.
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.
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
With that, we can use them in our various components. which will look like this
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.