¿Cómo puedo declarar correctamente los tipos para poder crear grupos de creadores de acciones de redux con partes de nombre compartidas utilizando createAction?

25 Jul, 2023 Programación 0

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

July 25, 2023 at 2:41 am

Parece que te estás encontrando con un error de tipo cuando intentas crear un creador de acciones Started que acepta un payload de tipo P. El mensaje de error sugiere que P podría ser instanciado con un tipo arbitrario que podría no estar relacionado con undefined.

Una solución podría ser definir explícitamente el tipo de P al llamar a createAsyncActions. Por ejemplo, en lugar de llamar a createAsyncActions<number>(), podrías llamar a createAsyncActions<{ data: number }>(), y luego usar este tipo al definir Started:

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 {
    Started: createAction<p, `${typeof="" type}/start`="">(`${type}/START`),
    Pending: createAction(`${type}/PENDING`),
  };
};

enum DocActions {
  Fetch = "Fetch",
  Delete = "Delete",
}

export const documentActions = {
  Fetch: createAsyncActions<{ data: number }>()(DocActions.Fetch),
};

const a = documentActions.Fetch.Started({ data: 1 });

En este ejemplo, createAsyncActions<{ data: number }>() crea un objeto IFluxAction con las propiedades Started y Pending. La propiedad Started está definida con un tipo ActionCreatorWithOptionalPayload 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:

interface IFluxAction<t extends="" string,="" p=""> {
  Started: ActionCreatorWithOptionalPayload<p, `${t}/start`="">;
  Pending: ActionCreatorWithoutPayload<`${T}/PENDING`>;
}

const createAsyncActions = <t extends="" string,="" p="undefined">() => {
  return {
    Started: createAction<p, `${typeof="" type}/start`="">(`${type}/START`),
    Pending: createAction(`${type}/PENDING`),
  } as IFluxAction<t, p="">;
};

enum DocActions {
  Fetch = "Fetch",
  Delete = "Delete",
}

export const documentActions = {
  Fetch: createAsyncActions<docactions.fetch, number="">(),
};

const a = documentActions.Fetch.Started(1);

En este ejemplo, createAsyncActions<docactions.fetch, number="">() crea un objeto IFluxAction con las propiedades Started y Pending. El tipo de payload se establece en number.

¡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,>

Answer

davy.ai

July 25, 2023 at 2:41 am
Parece que te estás encontrando con un error de tipo cuando intentas crear un creador de acciones Started que acepta un payload de tipo P. El mensaje de error sugiere que P podría ser instanciado con un tipo arbitrario que podría no estar relacionado con undefined.

Una solución podría ser definir explícitamente el tipo de P al llamar a createAsyncActions. Por ejemplo, en lugar de llamar a createAsyncActions<number>(), podrías llamar a createAsyncActions<{ data: number }>(), y luego usar este tipo al definir Started:
```
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 {
    Started: createAction<p, `${typeof="" type}/start`="">(`${type}/START`),
    Pending: createAction(`${type}/PENDING`),
  };
};

enum DocActions {
  Fetch = "Fetch",
  Delete = "Delete",
}

export const documentActions = {
  Fetch: createAsyncActions<{ data: number }>()(DocActions.Fetch),
};

const a = documentActions.Fetch.Started({ data: 1 });
```
En este ejemplo, createAsyncActions<{ data: number }>() crea un objeto IFluxAction con las propiedades Started y Pending. La propiedad Started está definida con un tipo ActionCreatorWithOptionalPayload 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:
```
interface IFluxAction<t extends="" string,="" p=""> {
  Started: ActionCreatorWithOptionalPayload<p, `${t}/start`="">;
  Pending: ActionCreatorWithoutPayload<`${T}/PENDING`>;
}

const createAsyncActions = <t extends="" string,="" p="undefined">() => {
  return {
    Started: createAction<p, `${typeof="" type}/start`="">(`${type}/START`),
    Pending: createAction(`${type}/PENDING`),
  } as IFluxAction<t, p="">;
};

enum DocActions {
  Fetch = "Fetch",
  Delete = "Delete",
}

export const documentActions = {
  Fetch: createAsyncActions<docactions.fetch, number="">(),
};

const a = documentActions.Fetch.Started(1);
```
En este ejemplo, createAsyncActions<docactions.fetch, number="">() crea un objeto IFluxAction con las propiedades Started y Pending. El tipo de payload se establece en number.

¡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,>

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Cómo puedo declarar correctamente los tipos para poder crear grupos de creadores de acciones de redux con partes de nombre compartidas utilizando createAction?

Answer

davy.ai