how to configure redux sagas with redux toolkit and typescript?

Question

This is my store :

import saga from 'redux-saga';
import {all, fork} from 'redux-saga/effects';
import { configureStore, getDefaultMiddleware} from '@reduxjs/toolkit';

import { watchCommonSaga} from './sagas';
import RootReducer from './slices';

function* RootSaga(){
    yield all([fork(watchCommonSaga)]);
}

const sagaMiddleware = saga();

const store = configureStore({
    reducer: RootReducer,
    middleware: [
        ...getDefaultMiddleware({thunk: false, serializableCheck: false}),
        sagaMiddleware
    ],
    devTools: process.env.NODE_ENV !== 'production',
})

sagaMiddleware.run(RootSaga);

export type RootState = ReturnType<typeof store.getState>

export default store;

, The problem is that getDefaultMiddleware is deprecated.:, How i can solve this? I can't find updated documentation.

https://stackoverflow.com/questions/68479631/getting-warning-message-getdefaultmiddleware-is-deprecated — Martin Kadlec, Jan 20 '22 at 22:26
Does this answer your question? [Getting warning message 'getDefaultMiddleware' is deprecated](https://stackoverflow.com/questions/68479631/getting-warning-message-getdefaultmiddleware-is-deprecated) — Lin Du, Jan 24 '22 at 02:44

score 2 · Answer 1 · answered Jan 27 '22 at 10:38

Use concat() to add another reducer to middleware.

I edit your code:

import saga from 'redux-saga';
import {all, fork} from 'redux-saga/effects';
import { configureStore, getDefaultMiddleware} from '@reduxjs/toolkit';

import { watchCommonSaga} from './sagas';
import RootReducer from './slices';

function* RootSaga(){
    yield all([fork(watchCommonSaga)]);
}
const sagaMiddleware = createSagaMiddleware();
const store = configureStore({
    reducer: {
        reducer: RootReducer,
    },
    middleware: (getDefaultMiddleware) => getDefaultMiddleware({
        serializableCheck: false,
        thunk: false
      }).concat(sagaMiddleware)
})

sagaMiddleware.run(RootSaga);

export type RootState = ReturnType<typeof store.getState>


export default store;

I've not seen any documentation on putting "thunk: false" anywhere, but that one line fixed everything for me. THANK YOU — discodane, Nov 14 '22 at 20:42
@discodane Yea, there is not documentation and I use this with ReduxToolkit addListener feature, which using thunk and it work with thunk: false. So it's very hard to say what happening on background of this parameters. — Vít Zadina, Nov 15 '22 at 08:43

how to configure redux sagas with redux toolkit and typescript?

1 Answers1