3状態を型で表す

React実践 / 全 6 枚

旗を増やすと事故が増える

読み込み中と失敗と中身を別々の state に持つと、ありえない組み合わせまで書けてしまいます。

旗を3つ持つ

const [items, setItems] =
  useState<Item[]>([]);
const [loading, setLoading] =
  useState(true);
const [error, setError] =
  useState("");

1つの型にまとめる

type LoadState =
  | { status: "loading" }
  | { status: "success";
      items: Item[] }
  | { status: "error";
      message: string };

1 / 6

← → キーでも送れます