时间戳

首页 > 解决方案 > 使用 redux-starter-kit 的 configureStore() 设置 saga 中间件

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

问题描述

我正在开发纯 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-starter-kit 的 redux-saga 旧设置

// 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 不起作用。

长话短说：

如何在不影响当前 saga 文件的情况下使用 redux-starter-kit 设置现有的 redux-saga 应用程序？

先感谢您。

标签： reduxreact-reduxredux-saga

解决方案

redux-starter-kitsagaMiddleware默认情况下不包括[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

推荐阅读