¿Cómo puedo declarar correctamente los tipos para poder crear grupos de creadores de acciones de redux con partes de nombre compartidas utilizando createAction?
Estoy tratando de usar tipos literales de plantillas para crear grupos de acciones de Redux tipadas, como “FETCH/START”, “FETCH/PENDING”, etc.
Quiero usar createAction de @reduxjs/toolkit para crear mis creadores de acciones, así:
import { createAction, ActionCreatorWithoutPayload, ActionCreatorWithOptionalPayload } from "@reduxjs/toolkit";
interface IFluxAction<t extends="" string,="" p=""> {
Started: ActionCreatorWithOptionalPayload<p, `${t}/start`="">;
Pending: ActionCreatorWithoutPayload<`${T}/PENDING`>;
}
const createAsyncActions = <p>() => <t extends="" string="">(type: T):
IFluxAction<t, p=""> => {
return {
// Type 'undefined' is not assignable to type 'P'.
// 'P' could be instantiated with an arbitrary type which
// could be unrelated to 'undefined'.
Started: createAction<p, `${typeof="" type}/start`="">(`${type}/START`),
Pending: createAction(`${type}/PENDING`),
};
};
enum DocActions {
Fetch = 'Fetch',
Delete = 'Delete',
};
export const documentActions = {
Fetch: createAsyncActions<number>()(DocActions.Fetch),
};
const a = documentActions.Fetch.Started(1);
REPL: https://replit.com/@AlexanderBausk/VibrantOffbeatChapters#src/main.ts
No puedo llamar correctamente a createAction cuando necesito que devuelva un creador de acciones con un payload de tipo P. createAction tiene un tipo condicional y simplemente no puedo hacerlo correctamente. No estoy seguro de si esto está relacionado con el uso de tipos literales de plantillas o si simplemente estoy estructurando incorrectamente mi tipado.
Agradecería cualquier ayuda o ideas sobre cómo lograr grupos tipados de creadores de acciones de una mejor manera.</p,></t,>
</p,>
davy.ai
Parece que te estás encontrando con un error de tipo cuando intentas crear un creador de acciones
Started
que acepta un payload de tipoP
. El mensaje de error sugiere queP
podría ser instanciado con un tipo arbitrario que podría no estar relacionado conundefined
.Una solución podría ser definir explícitamente el tipo de
P
al llamar acreateAsyncActions
. Por ejemplo, en lugar de llamar acreateAsyncActions<number>()
, podrías llamar acreateAsyncActions<{ data: number }>()
, y luego usar este tipo al definirStarted
:En este ejemplo,
createAsyncActions<{ data: number }>()
crea un objetoIFluxAction
con las propiedadesStarted
yPending
. La propiedadStarted
está definida con un tipoActionCreatorWithOptionalPayload
que espera un payload de tipo{ data: number }
.Otro enfoque podría ser usar un parámetro de tipo genérico para el payload en la interfaz
IFluxAction
:En este ejemplo,
createAsyncActions<docactions.fetch, number="">()
crea un objetoIFluxAction
con las propiedadesStarted
yPending
. El tipo de payload se establece ennumber
.¡Espero que estos ejemplos te ayuden a encontrar una solución que funcione para tu caso de uso!</docactions.fetch,></docactions.fetch,></t,></p,></p,></p,></t,></p,>