Typing middleware with redux-toolkit - reactjs

Question

I'm developing a webapp using TypeScript and redux-toolkit.
tl;dr
How to the set the type for dispatch parameter on a middleware?
I need to fetch some data from my server and save it on my store. So I wrote a code like bellow (simplified):
import { createSlice } from '#reduxjs/toolkit'
import { TNewOrder } from '../store'
const initialState: TNewOrder = {
prices: [],
// other stuffs...
}
const newOrderSlice = createSlice({
initialState,
name: 'new-order',
reducers: {
setPrices(state, action) {
const { payload } = action
return {
...state,
prices: payload.prices
}
},
updateFormData(state, action) {
// not important...
}
}
})
const { setPrices, updateFormData } = newOrderSlice.actions
const fetchPrices = () =>
async (dispatch: any) => {
const response = await fetch('https://jsonbox.io/box_4186ae80994ed3789969/prices/5de7e570de45ab001702a382')
const { prices } = await response.json()
dispatch(setPrices({ prices }))
}
export { fetchPrices, updateFormData }
export default newOrderSlice.reducer
Note that, because to get fetch a data is an async task, I can't put it directly on setPrices. So I created a middleware called fetchPrices to do the request task and call setPrices.
Despite it works, I'm unhappy with this solution because I set an any type. How is the correctly way to set a better type? I can't found a way to import ThunkDispatch from redux-toolkit.
Is there a better way to do it?

Answer 1

ThunkDispatch is not exported by #reduxjs/toolkit. You should import it from redux-thunk if you want to use it.
import { ThunkDispatch } from 'redux-thunk';
const fetchPrices = () =>
async (dispatch: ThunkDispatch) => {
const response = await fetch('https://jsonbox.io/box_4186ae80994ed3789969/prices/5de7e570de45ab001702a382')
const { prices } = await response.json()
dispatch(setPrices({ prices }))
}

Answer 2

The official suggestion is to use typeof store.dispatch, as Redux-Toolkit's store.dispatch already includes ThunkDispatch. (And you can extend store.dispatch if you use additional middlewares and have everything in a central location then.)
In addition, please also take a look at the TypeScript documentation of Redux-Toolkit. If you miss anything imporant, please open an issue and let us know :)