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.

Herramienta Redux utilizando createAsyncThunk y manejo de errores en TypeScript.

21 Jul, 2023 Programación

He vuelto a leer la documentación varias veces y no logro entender el error que estoy recibiendo.

Por alguna razón, necesito definir el tipo de error en getAccounts y accountsSlice, a pesar de que en la documentación dice que no debería hacerlo si paso el tipo rejectValue y return rejectWithValue(error as ServerError).

interface ServerError {
  statusCode: number
  description: string
}

export const getAccountsSlice = createAsyncThunk<
  GetAccountsState,
  {
    rejectValue: ServerError
  }
>('accountsSlice/getAccounts', async (_, { rejectWithValue }) => {
  try {
    // manejar el cumplimiento
  } catch (error) {
    console.error('ERROR DE PETICIÓN --', error)
    return rejectWithValue(error as ServerError)
  }
})

export const accountsSlice = createSlice({
  name: 'accountsSlice',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(getAccountsSlice.pending, (state) => {
         ...
      })
      .addCase(getAccountsSlice.fulfilled, (state, action) => {
         ...
      })
      .addCase(getAccountsSlice.rejected, (state, action) => {
        return {
          ...state,
          // debe agregarse como ServerError o se produce un error
          error: action.payload as ServerError,
          isLoading: false
        }
      })
  }
})

Además, al tener el tipo rejectValue definido en createAsyncThunk, obtengo este error al intentar hacer dispatch(getAccounts):

Se esperaba 1 argumento, pero se obtuvo 0.
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que aunque la documentación dice que no deberías necesitar definir el tipo de error en getAccounts y accountsSlice al pasar el tipo rejectValue y return rejectWithValue(error as ServerError), todavía estás encontrando errores.

    Una posible solución es definir explícitamente el tipo de retorno de tu función async en getAccountsSlice. Puedes hacer esto agregando Promise<getaccountsstate> como tipo de retorno.

    export const getAccountsSlice = createAsyncThunk<
  GetAccountsState,
  {
    rejectValue: ServerError
  }
>('accountsSlice/getAccounts', async (_, { rejectWithValue }): Promise<getaccountsstate> => {
    try {
      // manejar el cumplimiento
    } catch (error) {
      console.error('ERROR DE SOLICITUD --', error)
      return rejectWithValue(error as ServerError)
    }
  }
)

    Esto debería darle suficiente información a TypeScript para inferir correctamente los tipos correctos para getAccountsSlice.

    En cuanto al error que estás encontrando al intentar despachar getAccounts, parece que podrías estar omitiendo un argumento. Asegúrate de pasar los argumentos correctos al despachar la acción.

Comments are closed.