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

Question

我正在开发一个创建 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

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

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