how to configure redux sagas with redux toolkit and typescript?

user_16191347 0
Viewed 2095

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.

redux-saga redux-toolkit typescript
1 Answers

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;
user_142085010
Related