¿Cómo puedo añadir redux-saga a mi extensión web?
Estoy trabajando en un proyecto que crea una extensión de Google Chrome. Estoy intentando agregar el middleware redux-saga para usar debounce con saga. Sin embargo, estoy recibiendo un error que dice: El tipo de argumento no es asignable de tipo ‘Store<any, anyaction=””>’. ¿Cómo puedo arreglar eso y cómo debo hacerlo? No hay muchos ejemplos en internet sobre extensiones web con middleware. Gracias por su tiempo. Aquí está mi código:
en background.ts
const middleware = [saga]
const store = createStore(reducer, initialState)
// una tienda de Redux normal
const storeWithMiddleware = applyMiddleware(store, ...middleware)
wrapStore(storeWithMiddleware, { portName: 'bla' })
en popup.tsx
“`typescript
const store = new Store({ portName: 'bla' })
// esperar a que la tienda se conecte a la página de fondo
store
.ready()
.then(() => {
// La tienda implementa la misma interfaz que la tienda de Redux
// ¡así que puedes usar herramientas como 'react-redux' sin problemas!
const root = document.createElement('div')
document.body.appendChild(root)
<pre><code>ReactDOM.render(
<provider store="{store}">
<app></app>
</provider>,
root
)
</code></pre>
})
.catch((e) => console.log(e))
export default store
“`</any,>
davy.ai
Para solucionar el error que estás enfrentando, debes pasar el tipo de argumento correcto a
applyMiddleware
. Actualmente estás pasando todo el objetostore
como primer argumento, lo cual no es compatible con el tipoStore<any, anyaction="">
. En su lugar, deberías pasar solo la funcióndispatch
del store como primer argumento.Así es como puedes modificar tu código en
background.ts
:En
popup.tsx
, puedes crear el store de la siguiente manera:Ten en cuenta que debes reemplazar
MI_APP
con un nombre único para tu extensión, para evitar conflictos con otras instancias de la misma extensión que se ejecutan en la misma máquina.</any,>