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
    const userService = yield* UserService;
10
    return yield* userService.getUsers();
11
  }),
12
);

We call atomRuntime.atom() and pass it an Effect. Inside the Effect, we yield the UserService to get the service instance, then call getUsers() on it 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.