es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo puedo añadir redux-saga a mi extensión web?

19 Jul, 2023 Programación

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,>

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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 objeto store como primer argumento, lo cual no es compatible con el tipo Store<any, anyaction="">. En su lugar, deberías pasar solo la función dispatch del store como primer argumento.

    Así es como puedes modificar tu código en background.ts:

    import { applyMiddleware, createStore } from 'redux'
import createSagaMiddleware from 'redux-saga'
import { wrapStore } from 'webext-redux'
import reducer from './reducer'
import saga from './saga'

const sagaMiddleware = createSagaMiddleware()

// crea el store con el middleware
const store = createStore(reducer)

// aplica el middleware al store
const storeWithMiddleware = applyMiddleware(sagaMiddleware)(store)

// activa el store para la extensión
wrapStore(storeWithMiddleware, { portName: 'MI_APP' })

    En popup.tsx, puedes crear el store de la siguiente manera:

    import { Store } from 'webext-redux'

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

// espera a que el store se conecte a la página de background
store.ready().then(() => {
  // renderiza tu aplicación como de costumbre
})

export default store

    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,>

Comments are closed.