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

Posted 2023-02-19

【中文标题】如何将 redux-saga 添加到我的 Web 扩展中？

【英文标题】：How can I add redux-saga to my web extension?

【发布时间】：2022-01-16 20:40:51

【问题描述】：

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

在后台.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

【参考方案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 form redux 包，因此您还应该从redux store 中导入applyMiddleware 函数。

import createStore, applyMiddleware from 'redux'
...

【讨论】：

我试过但现在错误改变了。 '''Store 类型的参数不可分配给 StoreEnhancer''类型的参数''

看你另一个问题的截图，applyMiddleware 的整个签名看起来很奇怪。你是从哪里进口的？是直接从redux包导入的吗？你用的是什么版本的 redux？

我从 'webext-redux' 导入它

哦，这是一个重要的信息。我会在上面更新我的答案。

我从 redux 获得 applyMiddleware 并使用 createSagaMiddleware 创建中间件。现在没有错误。我希望我能:)