如何将 redux-saga 添加到我的 Web 扩展中？

Question

我正在开发一个创建 google chrome 扩展的项目。我正在尝试添加 redux-saga 中间件以使用 saga debounce。但是，我收到一条错误消息：参数类型不可分配 'Store<any, AnyAction>' 类型。我该如何解决这个问题，我应该怎么做？互联网上没有使用中间件进行 Web 扩展的各种示例。谢谢你的时间。这是我的代码：

在background.ts

const middleware = [saga]
const store = createStore(reducer, initialState)
// a normal Redux store
const storeWithMiddleware = applyMiddleware(store, ...middleware)
wrapStore(storeWithMiddleware, { portName: 'bla' })

在popup.tsx

const store = new Store({ portName: 'bla' })

// wait for the store to connect to the background page
store
  .ready()
  .then(() => {
    // The store implements the same interface as Redux's store
    // so you can use tools like `react-redux` no problem!
    const root = document.createElement('div')
    document.body.appendChild(root)

    ReactDOM.render(
      <Provider store={store}>
        <App />
      </Provider>,
      root
    )
  })
  .catch((e) => console.log(e))
//});
export default store

Answer 1

applyMiddleware 应该只包含中间件（不是商店）并作为参数传递给 createStore 函数：

const middleware = [saga]
const store = createStore(reducer, initialState, applyMiddleware(...middleware))
const storeWithMiddleware = wrapStore(store, { portName: 'bla' })

编辑：

由于您使用的是 webext-redux，看来您实际上是在混合使用两种创建存储的方法。仅当您也直接使用来自 webext-redux 的代理商店时，才应使用来自 webext-redux 的 applyMiddleware 。由于您使用的是 createStore 形式的 redux 包，因此您还应该从 redux 商店导入 applyMiddleware 函数。

import {createStore, applyMiddleware} from 'redux'
...

如何将 redux-saga 添加到我的 Web 扩展中？

How can I add redux-saga to my web extension?

google-chrome-extension

redux-saga

react-redux

chrome-extension-manifest-v3