Búsqueda de sitios web

typescript - El argumento de tipo 'ThunkAction' no se puede asignar al parámetro de tipo 'AnyAction'

He configurado una función redux thunk con TypeScript así:

export const fetchActivities = (): AppThunk => async dispatch => {
    dispatch(fetchActivitiesRequest())

    try {
        const res = await fetch("/activities")
        const body = await res.json()

        dispatch(fetchActivitiesSuccess(body))
    } catch (err) {
        dispatch(fetchActivitiesError(err))
    }
}

AppThunk es simplemente un tipo que deriva del tipo ThunkAction, con los siguientes parámetros de tipo:

export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, {}, null, Action<string>>

Mi problema es que, cuando intento configurar una prueba unitaria para mi acción, y cuando intento enviar la acción thunk de esta manera:

const middlewares = [thunk]
const mockStore = configureMockStore(middlewares)
const store = mockStore({ activities: [] })

store.dispatch(actions.fetchActivities())

Recibo el siguiente mensaje de error:

Argument of type 'ThunkAction<void, {}, null, Action<string>>' is not assignable to parameter of type 'AnyAction'.
  Property 'type' is missing in type 'ThunkAction<void, {}, null, Action<string>>' but required in type 'AnyAction'.ts(2345)

He intentado buscar una solución a este problema, aunque sin éxito. La mayoría de las sugerencias dicen que intentes agregar un parámetro any al genérico para dispatch, así dispatch<any>(actions.fetchActivities()). Aunque esto funciona para detener el error de tipado, solo se despachará la primera acción en el thunk, mientras que todo lo que está dentro de las declaraciones try y catch se ignora.

¿Alguien tiene alguna sugerencia sobre cómo solucionar este problema?

Respuesta #1

Estos son dos problemas distintos. Las tipificaciones de cualquier manera nunca influirán en el comportamiento en tiempo de ejecución.

En primer lugar: Que tu thunk no dispare ninguna otra acción solo puede tener un significado: Es muy probable que las otras llamadas a dispatch nunca se alcancen. ¿Estás seguro de que tu llamada a fetch alguna vez termina? Podría simplemente esperar para siempre una respuesta o algo así.

En segundo lugar, tu problema de tipado: El tipo normal Dispatch simplemente no soporta thunks por defecto. Tu solución con Dispatch<any> está bien. De lo contrario, podrías convertir tu función dispatch a ThunkDispatch del paquete redux-thunk.

Editar: Lo siento, esto simplemente parecía exactamente como el error RTK, pero es algo diferente. (Respuesta original, posiblemente incorrecta)

Este es un error conocido en RTK con un PR actualmente abierto que lo solucionaría; no he podido finalizarlo ya que estoy enfermo en este momento, pero puedes usar la compilación de CI hasta que lancemos una nueva versión. Puedes instalarlo mediante

yarn add https://pkg.csb.dev/reduxjs/redux-toolkit/commit/933aa4a1/@reduxjs/toolkit o npm i https://pkg.csb.dev/reduxjs/redux-toolkit/commit/933aa4a1/@reduxjs/toolkit

Respuesta #2

si estás usando hooks, puedes agregar el tipo "any" al hook

const dispatch = useDispatch<any>()

Artículos relacionados