redux - 使用 redux-starter-kit 的 configureStore() 设置 saga 中间件

Question

我正在开发纯粹的 redux-saga 应用程序，但随着应用程序的增长，文件的数量也在增长。为了解决这个问题，我尝试将 redux-starter-kit 设置到我当前的应用程序中。

这是我的商店配置文件index.js

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

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

旧设置仅适用于 redux-saga，没有 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())
// })

问题:

当我设置 redux-starter-kit 时，旧的 sagas 不起作用。

长话短说:

如何使用 redux-starter-kit 设置现有的 redux-saga 应用程序，而不干扰当前的 saga 文件？

提前谢谢您。

Answer 1

redux-starter-kit 默认情况下不包含 sagaMiddleware [1]。您需要将其添加到中间件列表并自行初始化 sagas。

就你的情况而言，我相信这应该有效:

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