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 acceder a getState en Redux Toolkit en TypeScript?

28 Jul, 2023 Programación

Tengo una operación createAsyncThunk y quiero acceder a getState dentro del toolkit. No estoy seguro de cómo convertir el tipo de getState en TypeScript:


export const getInitialDatapoints = createAsyncThunk(
'userSlice/getInitDatapoints',
async (args, { getState as AppState }) => {
const geoData = await getLocationData();
const googleData = getState().userSlice;
const response = await updateUserData(1);
return response.data;
}
);

donde AppState es:


export type AppState = ReturnType;

Obtengo este error:


Property 'AppState' does not exist on type 'GetThunkAPI<{}>'

¿Alguien puede ayudarme a solucionar este problema?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para acceder a getState dentro del kit de herramientas, puedes utilizar el tipo ThunkApi proporcionado por @reduxjs/toolkit, que se pasa como segundo argumento a createAsyncThunk. Así es como puedes actualizar tu código:

    import { createAsyncThunk, ThunkAction, ThunkApi } from '@reduxjs/toolkit';
import { getLocationData, updateUserData } from './api';
import { AppState } from './store';

export const getInitialDatapoints = createAsyncThunk<
  // Tipo de retorno del thunk
  UserSliceData,
  // Primer argumento del thunk
  void,
  // Tipo de ThunkAPI
  { state: AppState }
>(
  'userSlice/getInitDatapoints',
  async (_, { getState }) => {
    const geoData = await getLocationData();
    const googleData = getState().userSlice;
    const response = await updateUserData(1);
    return response.data;
  }
);

    El tipo ThunkApi tiene un campo state, que podemos establecer como nuestro tipo AppState. Luego podemos acceder a getState desde el argumento ThunkApi como se muestra arriba.

Comments are closed.