Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

411
Vistas
¿Es posible usar un tipo de unión mecanografiado para el estado de un segmento de Redux Toolkit?

Me gustaría usar un tipo de unión como este para representar el estado de mi segmento cuando uso Redux Toolkit:

 type AppState = { loading: true } | { loading: false; data: number };

Parece que el uso de Immerjs en los archivos reductores me impide cambiar entre las dos opciones de Unión, por ejemplo:

 import { createSlice, PayloadAction } from "@reduxjs/toolkit"; const initialState: AppState = { loading: true }; export const sampleSlice = createSlice({ name: "sample", initialState, reducers: { setup: (state) => { return { loading: false, data: 5 }; }, }, });

Lo que me da el siguiente error de mecanografiado:

 Type '(state: WritableDraft<{ loading: true; }>) => { loading: false; data: number; }' is not assignable to type 'CaseReducer<{ loading: true; }, { payload: any; type: string; }> | CaseReducerWithPrepare<{ loading: true; }, PayloadAction<any, string, any, any>>'.

¿Hay alguna manera de hacer funcionar esto? Mi solución actual no es usar un tipo de unión para representar el estado, pero me pregunto si existe una solución. También intenté no usar booleanos sino literales de cadena para la clave de loading , pero produce el mismo error.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

NOTA: según los documentos, la opción 2 es el mejor enfoque.

Opción 1 . Proporcione los tipos de parámetros genéricos para createSlice .

 import { createSlice, SliceCaseReducers } from '@reduxjs/toolkit'; type AppState = { loading: true } | { loading: false; data: number }; const initialState: AppState = { loading: true }; type CaseReducers = SliceCaseReducers<AppState>; export const sampleSlice = createSlice<AppState, CaseReducers>({ name: 'sample', initialState, reducers: { setup: (state) => { return { loading: false, data: 5 }; }, }, });

El tipo de state en el reductor de casos:

ingrese la descripción de la imagen aquí

Opción 2. Reparto del estado inicial. Consulte Definición del tipo de estado inicial

 import { createSlice, SliceCaseReducers } from '@reduxjs/toolkit'; type AppState = { loading: true } | { loading: false; data: number }; const initialState: AppState = { loading: true }; // type CaseReducers = SliceCaseReducers<AppState>; export const sampleSlice = createSlice({ name: 'sample', initialState: initialState as AppState, reducers: { setup: (state) => { return { loading: false, data: 5 }; }, }, });

versiones del paquete:

 "@reduxjs/toolkit": "^1.6.1", "typescript": "^4.3.5",
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda