TodoList.tsx

import React from "react";
import { useStores } from "@app/stores";
import { TodoItem } from "@app/components";

export const TodoList = () => {
  const { todoStore } = useStores();

  // This call will trigger a fetch automatically if we don't have any data
  const containers = todoStore.getAll();

  if (!todoStore.isReady) {
    // Handle setup state
    return;
  }

  if (todoStore.isPending) {
    // Handle loading state
    return;
  }

  if (!todoStore.inFailstate) {
    // Handle error
    return;
  }

  // Each container has isReady, isPending and inFailstate as well
  // so you can handle them individually if you need to
  const todos = containers.map((c) => c.value);
  return (
    <div>
      {todos.map((todo) => <TodoItem key={todo.id} todo={todo} />)}
    </div>
  )
}