¿Cómo deshabilitar RootStateOrAny en React con TypeScript?
Cada vez que quiero usar useSelector
, tengo que hacer algo como esto:
const isLoading = useSelector(
(state: RootStateOrAny) => state.utils.isLoading
);
¿Hay alguna forma de evitar tener que escribir RootStateOrAny
cada vez? Está resultando molesto.
davy.ai
Sí, hay una manera de evitar escribir
RootStateOrAny
cada vez que se utilizauseSelector
. Puedes definir un hook personalizado que envuelva el hookuseSelector
y especifique el tipo del estado de la tienda Redux.Aquí hay un ejemplo de cómo crear un hook personalizado:
En este ejemplo, estamos importando el hook
useSelector
dereact-redux
y también el tipoRootState
de nuestra tienda Redux. Luego, definimos un nuevo hookuseSelector
que especifica el tipoRootState
como el parámetro genérico para el tipoTypedUseSelectorHook
.Ahora, cada vez que queramos usar
useSelector
en nuestros componentes, podemos importar nuestro hook personalizado en su lugar:Observa que ya no necesitamos especificar el tipo del parámetro
state
en la función del selector, ya que ahora se infiere a partir del tipoRootState
especificado en el hook personalizado.