Es posible despachar manualmente el estado punk en crearAsyncthunk

Hey compañeros programadores,

Ha sido divertido aprender react-redux últimamente, pero tengo una pregunta que me molesta.

Mi entendimiento es que, usando createAsyncThunk generará automáticamente constantes tipo de acción. (pendiente, cumplido y rechazado)

Lo que quería saber es que hay alguna manera de enviar manualmente tipo de acción durante createAsyncthunk , para que podamos tener más flexibilidad en nuestro código.

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
import { userAPI } from './userAPI'

// First, create the thunk
const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId, thunkAPI) => {
    const response = await userAPI.fetchById(userId).then(
       ...
       dispatch(fulfilled)   // is this possible ?
    ).catch(
       dispatch(rejected)    // is this possible ?
    )

    return response.data
  }
)

// Then, handle actions in your reducers:
const usersSlice = createSlice({
  name: 'users',
  ...,
  extraReducers: {
    // Add reducers for additional action types here, and handle loading state as needed
    [fetchUserById.fulfilled]: (state, action) => {
      // Add user to the state array
      state.entities.push(action.payload)
    }
  }
})

// Later, dispatch the thunk as needed in the app
dispatch(fetchUserById(123))

Pregunta hecha hace 3 años, 4 meses, 29 días - Por bughunterx

3 Respuestas:

  • El punto createAsyncThunk es que genera esos tipos de acción, y los envía automáticamente. Definitivamente lo haces no necesidad dispatch(fulfilled()) tú mismo, porque eso es lo que createAsyncThunk lo hace para usted - sólo tiene que devolver una promesa que resuelve o rechaza, y envía la fulfilled/rejected Tipos de acción basados en eso.

    Tú. do acceder a thunkAPI.dispatch, para que puedas enviar otras acciones si es necesario, pero no necesitas preocuparte por el fulfilled/rejected actúa usted mismo.

    Respondida el Dec 17, 2020 a las 16:53 - por logicluminary3c42

    Votos positivos: 0 | Votos negativos: 0

  • En el código que compartiste, estás utilizando createAsyncThunk de Redux Toolkit para crear una función asíncrona que maneja las acciones de manera automatizada. Sin embargo, si deseas tener más flexibilidad y control sobre las acciones despachadas, puedes lograrlo manualmente dentro de la función asíncrona que pasas a createAsyncThunk.

    En lugar de despachar directamente las acciones "cumplido" o "rechazado" desde la función asíncrona, puedes simplemente devolver el resultado de la llamada asíncrona y dejar que createAsyncThunk maneje la despacho de estas acciones automáticamente de acuerdo al estado de la promesa. Por ejemplo:

    javascript
const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId, thunkAPI) => {
    try {
      const response = await userAPI.fetchById(userId);
      return response.data; // Devolver los datos en caso de éxito
    } catch (error) {
      throw error; // Lanzar el error en caso de falla
    }
  }
)

    Luego, en tu slice de Redux, puedes manejar el resultado de la promesa en el extraReducers de la misma manera que lo estás haciendo:

    javascript
const usersSlice = createSlice({
  name: 'users',
  initialState: {
    entities: []
  },
  reducers: {},
  extraReducers: {
    [fetchUserById.fulfilled]: (state, action) => {
      state.entities.push(action.payload);
    },
    [fetchUserById.rejected]: (state, action) => {
      // Manejar el rechazo de la promesa
    }
  }
})

    De esta manera, mantienes la flexibilidad de manejar manualmente la respuesta y los errores de la llamada asíncrona dentro de la función fetchUserById, pero continúas aprovechando las ventajas de createAsyncThunk para despachar automáticamente las acciones de "cumplido" y "rechazado" según corresponda.

    Respondida el Dec 18, 2020 a las 16:53 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Sí, es posible despachar manualmente el estado de progreso durante la creación de createAsyncThunk. Para hacer esto, puedes usar la función dispatch que se pasa al segundo argumento de la función de thunk asíncrona.

    Aquí tienes un ejemplo modificado de tu código que muestra cómo despachar manualmente el estado de progreso:

    
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
import { userAPI } from './userAPI'

// First, create the thunk
const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId, thunkAPI) => {
    const response = await userAPI.fetchById(userId).then(
       dispatch(thunkAPI.dispatch(pending))   // Despachar manualmente el estado pendiente
       ...
       dispatch(thunkAPI.dispatch(fulfilled))   // Despachar manualmente el estado cumplido
    ).catch(
       dispatch(thunkAPI.dispatch(rejected))    // Despachar manualmente el estado rechazado
    )

    return response.data
  }
)

// Then, handle actions in your reducers:
const usersSlice = createSlice({
  name: 'users',
  ...,
  extraReducers: {
    // Add reducers for additional action types here, and handle loading state as needed
    [fetchUserById.fulfilled]: (state, action) => {
      // Add user to the state array
      state.entities.push(action.payload)
    }
  }
})

// Later, dispatch the thunk as needed in the app
dispatch(fetchUserById(123))

    En este ejemplo, utilizamos la función dispatch pasada a la función thunk para despachar manualmente las acciones de estado de progreso. Esto te da más flexibilidad en tu código y te permite controlar el estado de progreso como desees.

    Respondida el Dec 18, 2020 a las 16:57 - por Gemini

    Votos positivos: 0 | Votos negativos: 0