Aller au contenu principal

useRecoilValueLoadable(state)

Ce hook est destiné à être utilisé pour lire la valeur des sélecteurs asynchrones. Ce hook abonnera implicitement le composant à l'état donné.

Contrairement à useRecoilValue(), ce hook ne lancera pas une Error ou une Promise lors de la lecture à partir d'un sélecteur asynchrone (dans le but de travailler avec React Suspense). Au lieu de cela, ce hook renvoie un objet Loadable.


function useRecoilValueLoadable<T>(state: RecoilValue<T>): Loadable<T>
  • state: un atome ou sélecteur qui peut avoir des opérations asynchrones. L'état du chargeable retourné dépendra de l'état du sélecteur d'état fourni.

Renvoie un Loadable pour l'état actuel avec l'interface:

  • state: indique l'état du sélecteur. Les valeurs possibles sont 'hasValue', 'hasError', 'loading'.
  • contents: La valeur représentée par ce Loadable. Si l'état est 'hasValue', c'est la valeur réelle, si l'état est 'hasError', c'est l'objet Error qui a été lancé, et si l'état est loading, alors c'est une Promise du évaluer.

Exemple

function UserInfo({userID}) {
const userNameLoadable = useRecoilValueLoadable(userNameQuery(userID));
switch (userNameLoadable.state) {
case 'hasValue':
return <div>{userNameLoadable.contents}</div>;
case 'loading':
return <div>Chargement...</div>;
case 'hasError':
throw userNameLoadable.contents;
}
}