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

Question

I am working on a project that creates a google chrome extension. I am trying to add redux-saga middleware for using saga debounce. However, I am getting an error that says: Argument type is not assignable of type 'Store<any, AnyAction>'. How can I fix that and How should I do that? There are not various example in the internet in web extension with middleware. Thanks for your time. Here is my code:

in background.ts

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

in 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 should contain only middlewares (not the store) and be passed as an argument to the createStore function:

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

Edit:

Since you are using webext-redux, it seems you are actually mixing two ways of creating store together. You should use the applyMiddleware from webext-redux only if you are directly using the proxy Store from webext-redux as well. Since you are using createStore form redux package instead, you should also import the applyMiddleware function from the redux store.

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