setup saga middleware with redux-starter-kit's configureStore()

I am working on the application which is purely redux-saga, but as the application is growing, the number of files is also growing. To solve this issue I am trying to setup redux-starter-kit to my current application.

Here is my store configuration file index.js

import { configureStore, getDefaultMiddleware } from 'redux-starter-kit'
import rootReducer from '../reducers'

export const store = configureStore({
  reducer: rootReducer,
  middleware: [...getDefaultMiddleware()]
})

old set up for just redux-saga without redux-starter-kit

// import createSagaMiddleware from 'redux-saga'
// import { initSagas } from '../initSagas'
// import rootReducer from '../reducers'
// import { loadState, saveState } from './browserStorage'

// function configureStore () {
//   const sagaMiddleware = createSagaMiddleware()
//   const persistedState = loadState()
//   const createdStore = createStore(
//     rootReducer,
//     persistedState,
//     applyMiddleware(sagaMiddleware)
//   )
//   initSagas(sagaMiddleware)
//   return createdStore
// }

// export const store = configureStore()

// store.subscribe(() => {
//   saveState(store.getState())
// })

the problem:

when I set up the redux-starter-kit the old sagas are not working.

Long story short:

How can I set up my existing redux-saga application with redux-starter-kit, without disturbing the current saga files?

Thank you in advance.

Solution

redux-starter-kit does not include sagaMiddleware by default [1]. You'll need to add it to the middleware list and initialize the sagas yourself.

In your case I believe this should work:

import createSagaMiddleware from 'redux-saga'
import { configureStore, getDefaultMiddleware } from 'redux-starter-kit'
import rootReducer from '../reducers'
import { initSagas } from '../initSagas'

const sagaMiddleware = createSagaMiddleware();
export const store = configureStore({
  reducer: rootReducer,
  middleware: [...getDefaultMiddleware(), sagaMiddleware]
})
initSagas(sagaMiddleware);

[1] https://redux-starter-kit.js.org/api/getdefaultmiddleware