---
name: persist-mobx
description: Persist a MobX observable object with @stainless-code/persist (persistObservable). Use when wiring MobX state to localStorage/sessionStorage/IndexedDB under enforceActions.
license: MIT
metadata:
  type: composition
  library: "@stainless-code/persist"
  library_version: "0.4.1"
  framework: "mobx"
sources:
  - stainless-code/persist:src/adapters/sources/mobx.ts
  - stainless-code/persist:docs/architecture.md
---

# Persisting MobX

`@stainless-code/persist/sources/mobx` maps an **observable object** through `toJS` / `runInAction`+`Object.assign` / `observe` onto `persistSource`.

## When to use this skill

- You have `observable.object({…})` (or compatible object observable) and want reload survival.
- You use `configure({ enforceActions: "always" })` — hydrate must run inside an action.

## Install

```bash
bun add @stainless-code/persist mobx
```

`mobx` is an optional peer of `/sources/mobx`.

## Minimal wiring

```ts
import { observable } from "mobx";
import { createJSONStorage } from "@stainless-code/persist";
import { persistObservable } from "@stainless-code/persist/sources/mobx";

const prefs = observable.object({ theme: "light" as const });
const persist = persistObservable(prefs, {
  name: "app:prefs:v1",
  storage: createJSONStorage(() => localStorage),
});
```

## Hydrate semantics

Hydrate uses `runInAction(() => Object.assign(observable, next))`. Bare assign would throw under `enforceActions: "always"`. Keys absent from `next` are not deleted (same as valtio).

## Common mistakes

- **Writing hydrate outside actions** in custom `persistSource` ports — this adapter already wraps `runInAction`.
- **Class instances / primitives** as the persist root — target is an object observable.
- **Expecting deep replace** from `Object.assign` alone.

## API surface

- `persistObservable(observable, options) → PersistApi`
- Options / `PersistApi`: same as `persistSource`

See also: `persist-valtio` — same object + assign hydrate pattern without MobX actions.