# Manage Reatom Stores

> Create or update Reatom stores in this repo. Use when adding a new store under `src/stores`, changing store state shape, adding computed atoms, or creating/updating related store service functions.

- Skill: `majiayu000/manage-reatom-stores` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/manage-reatom-stores`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/manage-reatom-stores/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/manage-reatom-stores

---


# Manage Reatom Stores

Follow these steps to create or update stores using the existing appSession patterns.

## 1) Define or update state types

Create or update the state interface in `src/api/*` when the store shape is shared or reused.

Example:

```ts
export interface Movie {
  id: string
  title: string
  year: number
  tags?: string[]
}
```

## 2) Create or update the store atom

Add a new file in `src/stores/*` or update the existing atom.

Example:

```ts
import { atom, computed } from '@reatom/core'
import { Movie } from '../api/movie'

export const moviesAtom = atom<Movie[]>([])

export const movieCountAtom = computed(() => moviesAtom().length)
```

Keep initial state explicit, and prefer small, focused atoms.

## 3) Add or update service functions (if needed)

If store updates involve side effects or async logic, place functions in `src/stores/*.service.ts` and mutate state via `*.set`.

Example:

```ts
import { moviesAtom } from './movies'

export function addMovie(movie: Movie): void {
  moviesAtom.set((movies) => [...movies, movie])
}
```

## 4) Update usages

Search for all usages and update them to match the new store shape.

Use:
- `rg -n "moviesAtom|movieCountAtom|addMovie" src`

## 5) Keep types strict and clean

Ensure no unused imports or params remain, and that `strict` TypeScript checks pass.

