Creating the Users Atom

Now that we have an Atom Runtime with access to UserService, we can create an Atom that fetches users’ data.

In atoms/user.ts, add the following code:

1
import { Effect } from "effect";
2

3
import { atomRuntime } from "@/atom-runtime";
4
import { UserService } from "@/services/user-service";
5

6
// ============ Users Atom ============
7
export const usersAtom = atomRuntime.atom(
8
  Effect.gen(function* () {
9
    return yield* UserService.getUsers();
10
  }),
11
);

We call atomRuntime.atom() and pass it an Effect. Inside the Effect, we call UserService.getUsers() to fetch users’ data.

Because usersAtom runs an Effect, it’s called an effectful Atom — a term we’ll use throughout the course to refer to any Atom that runs an Effect.