類別 Loadable

Loadable 物件表示 Recoil atom 或 selector 的目前狀態。此狀態可能具有可用值，可能為錯誤狀態，或仍可能等待非同步解析。Loadable 擁有以下介面

state：atom 或 selector 的目前狀態。可能的值為 'hasValue'、'hasError' 或 'loading'。
contents：此 Loadable 所表示的值。若狀態為 hasValue，則為實際值；若狀態為 hasError，則為擲回的 Error 物件；若狀態為 loading，則為值的 Promise。

Loadable 也包含用來存取目前狀態的輔助方法。請將此 API 視為不穩定

getValue() - 存取符合 React Suspense 和 Recoil selector 語意之值的函式。若狀態具有值，則回傳一個值；若有錯誤，則擲回該錯誤；若仍等待處理，則暫停執行或繪製以傳播等待處理的狀態。
toastrPromised()：傳回一個 Promise，當選取器確實解析後，這個函式也會解析。如果選取器是同步的或是已經確實解析，它就會傳回一個立即解析的 Promise。
valueMaybe() - 如果有值，就傳回該值，否則傳回 undefined
valueOrThrow() - 如果有值，就傳回該值，否則擲出錯誤。
map(callback) - 代入一個函式來轉換 Loadable 的值，並傳回一個具有轉換過值的全新 Loadable。轉換函式會取得一個父項 Loadable 值的參數，你可以傳回新 Loadable 的新值，它也會傳遞擲出的錯誤或 Suspense。你的回呼函式可以傳回一個新值、一個 Promise 或一個新值的 Loadable，也可以擲出錯誤。這種方法可比擬於 Promise 的 .then()。

範例

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

建立載入值

RecoilLoadable 介面可以匯入建立你自己的 Loadable 物件。

interface RecoilLoadable {
  function of<T>(T | Promise<T>, Loadable<T>): Loadable<T>;
  function error<T>(mixed): Loadable<T>;
  function all(Array<mixed | Loadable<mixed> | Promise<mixed>>): Loadable<Array<mixed>>;
  function all({[string]: mixed | Loadable<mixed> | Promise<mixed>}): Loadable<{[string]: mixed}>;
  function loading(): Loadable<empty>;
  function isLoadable(mixed): boolean;
}

範例

RecoilLoadable.of(123);

RecoilLoadable.error(new Error('ERROR'));

RecoilLoadable.all([
  RecoilLoadable.of(1),
  RecoilLoadable.of(10),
  RecoilLoadable.of(100),
]).map(([a, b, c]) => a+b+c);

Loadable 可以表示非同步值

// Asynchronously resolves to 123
RecoilLoadable.of(Promise.resolve(123));

類似於 Promise.resolve()，RecoilLoadable.of() 可以接受文字值，以及也會被解封裝的 Loadable 或 Promise

// All resolve to 'x'
RecoilLoadable.of('x');
RecoilLoadable.of(RecoilLoadable.of('x'));
RecoilLoadable.of(Promise.resolve('x'));

類似地，類似於 Promise.all()，RecoilLoadable.all() 可以接受 Loadable、Promise 或文字值的陣列

// Resolves to [1, 2, 3]
RecoilLoadable.all([1, RecoilLoadable.of(2), Promise.resolve(3)]);

// Resolves to {value: 1, loadable: 2, promise: 3}
RecoilLoadable.all({
  value: 1,
  loadable: RecoilLoadable.of(2),
  promise: Promise.resolve(3),
});

// Never resolves
RecoilLoadable.loading();

範例​

建立載入值​

範例​

範例

建立載入值

範例