# alok-shete/beru architecture

> Architecture diagram of the GitHub repository alok-shete/beru, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/alok-shete/beru
- Repository: https://github.com/alok-shete/beru

## Overview

Beru is a lightweight React and React Native state-management library. An application creates a store, updates it directly or through actions, and React components subscribe to the whole state or selected values. Optional middleware persists state and supports hydration, while a separate DevTools integration records changes and handles time-travel commands. The graph covers the sampled runtime modules and README capabilities; persistence setup beyond the sampled implementation is shown only where documented, not as an inspected call path.

Main entry points: [`src/middleware/persistence/core/persist.ts`](https://github.com/alok-shete/beru/blob/main/src/middleware/persistence/core/persist.ts) (State persistence), [`src/middleware/devtools/index.ts`](https://github.com/alok-shete/beru/blob/main/src/middleware/devtools/index.ts) (DevTools integration), [`src/core/store.ts`](https://github.com/alok-shete/beru/blob/main/src/core/store.ts) (Store and actions), [`src/core/hooks.ts`](https://github.com/alok-shete/beru/blob/main/src/core/hooks.ts) (React store hooks)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_state["State management"]
  node_store["Store and actions<br/>[store.ts]"]
  node_statevalue[("In-memory state<br/>[store.ts]")]
  node_exports["Public API<br/>[index.ts]"]
end

subgraph group_react["React subscriptions"]
  node_hooks["React store hooks<br/>[hooks.ts]"]
  node_selector["Selector subscription"]
  node_selectorplatform["Platform selector entry"]
end

subgraph group_middleware["Optional middleware"]
  node_persist["State persistence<br/>[persist.ts]"]
  node_hydrator["Hydration coordinator<br/>[setupHydrator.ts]"]
  node_devtools["DevTools integration<br/>[index.ts]"]
end

subgraph group_internals["Shared internals"]
  node_common["Shared utilities<br/>[common.ts]"]
end

node_app(("Application code"))
node_storage[("Configured storage")]
node_extension["Redux DevTools"]

node_app -->|"imports API"| node_exports
node_exports -->|"exports create"| node_store
node_store -->|"holds state"| node_statevalue
node_store -->|"uses hooks"| node_hooks
node_app -->|"subscribes in components"| node_hooks
node_hooks -->|"selects snapshots"| node_selectorplatform
node_selectorplatform -->|"delegates on web"| node_selector
node_app -.->|"opts into persistence"| node_persist
node_persist -->|"reads and writes"| node_storage
node_hydrator -->|"hydrates stores"| node_persist
node_devtools -->|"connects and sends"| node_extension
node_devtools -->|"updates store"| node_statevalue
node_persist -->|"uses fallbacks"| node_common
node_hydrator -->|"runs tasks"| node_common
node_devtools -->|"logs errors"| node_common

click node_store "https://github.com/alok-shete/beru/blob/main/src/core/store.ts"
click node_statevalue "https://github.com/alok-shete/beru/blob/main/src/core/store.ts"
click node_hooks "https://github.com/alok-shete/beru/blob/main/src/core/hooks.ts"
click node_selector "https://github.com/alok-shete/beru/blob/main/src/utils/useSyncExternalStoreWithSelector.native.ts"
click node_selectorplatform "https://github.com/alok-shete/beru/blob/main/src/utils/useSyncExternalStoreWithSelector.ts"
click node_persist "https://github.com/alok-shete/beru/blob/main/src/middleware/persistence/core/persist.ts"
click node_hydrator "https://github.com/alok-shete/beru/blob/main/src/middleware/persistence/core/setupHydrator.ts"
click node_devtools "https://github.com/alok-shete/beru/blob/main/src/middleware/devtools/index.ts"
click node_common "https://github.com/alok-shete/beru/blob/main/src/utils/common.ts"
click node_exports "https://github.com/alok-shete/beru/blob/main/src/index.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_store,node_statevalue,node_exports toneBlue
class node_hooks,node_selector,node_selectorplatform,node_storage toneAmber
class node_persist,node_hydrator,node_devtools toneMint
class node_common toneRose
class node_app,node_extension toneIndigo
```

## Components

### State management

- [Store and actions](https://github.com/alok-shete/beru/blob/main/src/core/store.ts): `src/core/store.ts`
- [In-memory state](https://github.com/alok-shete/beru/blob/main/src/core/store.ts): `src/core/store.ts`
- [Public API](https://github.com/alok-shete/beru/blob/main/src/index.ts): `src/index.ts`

### React subscriptions

- [React store hooks](https://github.com/alok-shete/beru/blob/main/src/core/hooks.ts): `src/core/hooks.ts`
- [Selector subscription](https://github.com/alok-shete/beru/blob/main/src/utils/useSyncExternalStoreWithSelector.native.ts): `src/utils/useSyncExternalStoreWithSelector.native.ts`
- [Platform selector entry](https://github.com/alok-shete/beru/blob/main/src/utils/useSyncExternalStoreWithSelector.ts): `src/utils/useSyncExternalStoreWithSelector.ts`

### Optional middleware

- [State persistence](https://github.com/alok-shete/beru/blob/main/src/middleware/persistence/core/persist.ts): `src/middleware/persistence/core/persist.ts`
- [Hydration coordinator](https://github.com/alok-shete/beru/blob/main/src/middleware/persistence/core/setupHydrator.ts): `src/middleware/persistence/core/setupHydrator.ts`
- [DevTools integration](https://github.com/alok-shete/beru/blob/main/src/middleware/devtools/index.ts): `src/middleware/devtools/index.ts`

### Shared internals

- [Shared utilities](https://github.com/alok-shete/beru/blob/main/src/utils/common.ts): `src/utils/common.ts`

### Other components

- **Application code**
- **Configured storage**
- **Redux DevTools**

## Connections

- Application code → Public API: imports API (evidence: `src/index.ts`)
- Public API → Store and actions: exports create (evidence: `src/index.ts`)
- Store and actions → In-memory state: holds state (evidence: `src/core/store.ts`)
- Store and actions → React store hooks: uses hooks (evidence: `src/core/store.ts`)
- Application code → React store hooks: subscribes in components (evidence: `README.md`)
- React store hooks → Platform selector entry: selects snapshots (evidence: `src/core/hooks.ts`)
- Platform selector entry → Selector subscription: delegates on web (evidence: `src/utils/useSyncExternalStoreWithSelector.ts`)
- Application code → State persistence: opts into persistence
- State persistence → Configured storage: reads and writes (evidence: `src/middleware/persistence/core/persist.ts`)
- Hydration coordinator → State persistence: hydrates stores (evidence: `src/middleware/persistence/core/setupHydrator.ts`)
- DevTools integration → Redux DevTools: connects and sends (evidence: `src/middleware/devtools/index.ts`)
- DevTools integration → In-memory state: updates store (evidence: `src/middleware/devtools/index.ts`)
- State persistence → Shared utilities: uses fallbacks (evidence: `src/middleware/persistence/core/persist.ts`)
- Hydration coordinator → Shared utilities: runs tasks (evidence: `src/middleware/persistence/core/setupHydrator.ts`)
- DevTools integration → Shared utilities: logs errors (evidence: `src/middleware/devtools/index.ts`)