Typing Redux toolkit's store in TypeScript

Question

I'm trying to get started using Redux in React + TypeScript so I am following the Redux Toolkit's tutorials and try implementing it in a sample app.

I am having a lot of difficulty with typings concerning the store and the mappStateToProps function parameters.

I configured the store with a slice as follows:

import { configureStore } from '@reduxjs/toolkit'

import linksReducer from '../features/links/linksSlice'

const store = configureStore({
  reducer: {
    links: linksReducer,
  },
})

export default store
export type AppStore = typeof store

And I connected a component like so:

import React from 'react'
import { connect, ConnectedProps } from 'react-redux'

import { AppStore } from '../../features/appStore'
import { deleteLink } from '../../features/links/linksSlice'

import LinkCard from './LinkCard'
import Link from '../../models/Link'
import EmptyList from './EmptyList'

const mapStateToProps = (state: any) => ({
  links: state.links,
})
const mapDispatchToProps = { deleteLink }
const connector = connect(mapStateToProps, mapDispatchToProps)

const LinksGrid = (props: ConnectedProps<typeof connector>) => {
  //  ...
}

export default connector(LinksGrid)

As you can see, I used the any type for the first argument of the mapStateToProps function because I can't find out how I am supposed to type it. Using any , I have no problem running the application so I assume I only have a typing problem.

The official documentation of RTK gives only an example of using combineReducers instead of configureStore , and it uses TS's ReturnType<T> which can only work on function but of course the store variable is not a function so it doesn't work.
I have also read the Redux and React Redux documentation but I still can't figure what to do.

I am sure this is actually simple but here I am... Can anyone help me get that typing working?

Thanks :)

Answer 1

Both the Redux Toolkit Advanced Tutorial and Usage with TypeScript docs pages show you how to do this correctly.

First, it's not the type of the store that's important here. It's the type of the store state .

If you use combineReducers() yourself, you can define that type as:

const rootReducer = combineReducers({
    first: firstReducer,
    second: secondReducer,
});

type RootState = ReturnType<typeof rootReducer>

However, since you're using the shorthand setup form by passing the slice reducers to configureStore (which calls combineReducers() internally), you can do the same thing by checking the return type of store.getState instead:

const store = configureStore({
    reducer: {
        first: firstReducer,
        second: secondReducer,
    }

});

type RootState = ReturnType<typeof store.getState>

Then, as shown in the docs, you can import the RootState type into your component file and use it as the type in your mapState function:

import {RootState} from "app/store";

const mapStateToProps = (state: RootState) => ({
  links: state.links,
})

Answer 2

It works me:

store?: EnhancedStore<{ default: RootState }, AnyAction, [ThunkMiddleware]>;

additionally i have added redux-thunk for ThunkMiddleware