How to Get the Root State type from your TypeScript React application.

Wed, 09 Sep 2020 06:57:55 +0000

One of the primary benefits of TypeScript is its static type checking, ensuring that the variables in your code are receiving the right things.

There are many instances in your application where you need to grab the type of the state, especially if you are using Redux and combining different state reducers into one root reducer.

Here is a quick guide to ensuring you always have the latest type of your state in your TypeScript React application!

Where Your Root State Lives in Redux

For those using redux, the state of the application doesn't live inside components necessarily, which is the case normally. Rather your components are connected to a 'store' of the global application state and get their information from that.

In most cases, you will have many 'reducers' that reduce certain state change actions, and these reducers will combine into a 'root reducer', that will combine all the states. It will look something like this:

rootReducer.ts

import { combineReducers } from 'redux';

import userReducer from './..';
import shopReducer from './..';

const rootReducer = combineReducers({
    user: userReducer,
    shop: shopReducer
});

Grabbing the State from the Root Reducer

If you remember, the rootReducer describes the state of your redux application. To grab the type, simply write the following export:

export type RootState = ReturnType<typeof rootReducer>;

export type: so you can use the state type in other places
RootState: name of the type
ReturnType<>: returns the type of the return inside the <>
typeof rootReducer: the complicated redux type of the reducer that we will let TypeScript decode.

The benefit of this is that the type is not fixed; you can add or remove your reducers from the root reducer and your root state will update accordingly!

Thanks for reading :)

Forem: ‌

How to Get the Root State type from your TypeScript React application.

Where Your Root State Lives in Redux

Grabbing the State from the Root Reducer