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;
  }
}

Exemple​

Exemple