Redux deprecated code (thunk middleware related)

Question

I found a 3-year-old tutorial on youtube and it contains the following code snippet:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from '@redux-devtools/extension';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState = {};

const middleware = [thunk];

const store = createStore(
    rootReducer,
    initialState,
    composeWithDevTools(applyMiddleware(...middleware))
)

export default store;

I cannot undeprecate this code. Here I believe the only deprecated part is applyMiddleware but maybe also more things.

I tried to fix with something like the following:

import { ThunkMiddleware } from 'redux-thunk';
import { configureStore, Middleware } from '@reduxjs/toolkit';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const middleware: Middleware[] = [thunk as ThunkMiddleware];

export const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(middleware),
});

Which still does not work because of this part: [thunk as ThunkMiddleware]

Which gives me this error:

Conversion of type 'typeof import("/home/user/project/frontend/node_modules/redux-thunk/dist/redux-thunk")' to type 'ThunkMiddleware' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Type 'typeof import("/home/user/project/frontend/node_modules/redux-thunk/dist/redux-thunk")' provides no match for the signature '(api: MiddlewareAPI<ThunkDispatch<any, undefined, AnyAction>, any>): (next: (action: unknown) => unknown) => (action: unknown) => unknown'.ts(2352)

I also tried this:

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';
import thunk from 'redux-thunk';


const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(thunk),
});

export default store;

But middleware: gives me this error:

Type '(getDefaultMiddleware: GetDefaultMiddleware<any>) => Tuple<[ThunkMiddleware<any, UnknownAction>, typeof import("/home/user/project/frontend/node_modules/redux-thunk/dist/redux-thunk")]>' is not assignable to type '(getDefaultMiddleware: GetDefaultMiddleware<any>) => Tuple<Middlewares<any>>'.
  Type 'Tuple<[ThunkMiddleware<any, UnknownAction>, typeof import("/home/user/project/frontend/node_modules/redux-thunk/dist/redux-thunk")]>' is not assignable to type 'Tuple<Middlewares<any>>'.
    Type '[ThunkMiddleware<any, UnknownAction>, typeof import("/home/user/project/frontend/node_modules/redux-thunk/dist/redux-thunk")]' is not assignable to type 'Middlewares<any>'.
      Type 'ThunkMiddleware<any, UnknownAction> | typeof import("/home/user/project/frontend/node_modules/redux-thunk/dist/redux-thunk")' is not assignable to type 'Middleware<{}, any, Dispatch<UnknownAction>>'.
        Type 'typeof import("/home/user/project/frontend/node_modules/redux-thunk/dist/redux-thunk")' is not assignable to type 'Middleware<{}, any, Dispatch<UnknownAction>>'.
          Type 'typeof import("/home/user/project/frontend/node_modules/redux-thunk/dist/redux-thunk")' provides no match for the signature '(api: MiddlewareAPI<Dispatch<UnknownAction>, any>): (next: (action: unknown) => unknown) => (action: unknown) => unknown'.ts(2322)
configureStore.d.ts(25, 5): The expected type comes from property 'middleware' which is declared here on type 'ConfigureStoreOptions<any, UnknownAction, Tuple<Middlewares<any>>, Tuple<[StoreEnhancer<{ dispatch: {}; }>, StoreEnhancer]>, any>'
(property) ConfigureStoreOptions<any, UnknownAction, Tuple<[ThunkMiddleware<any, UnknownAction>]>, Tuple<[StoreEnhancer<{ dispatch: ThunkDispatch<any, undefined, UnknownAction>; }>, StoreEnhancer]>, any>.middleware?: ((getDefaultMiddleware: GetDefaultMiddleware<any>) => Tuple<[thunk.ThunkMiddleware<any, UnknownAction>]>) | undefined
An array of Redux middleware to install, or a callback receiving getDefaultMiddleware and returning a Tuple of middleware. If not supplied, defaults to the set of middleware returned by getDefaultMiddleware().

@example

`middleware: (gDM) => gDM().concat(logger, apiMiddleware, yourCustomMiddleware)`
@see — https://redux-toolkit.js.org/api/getDefaultMiddleware#intended-usage