Skip to main content

Optics

Scalable state management for TypeScript applications

Focus anywhere in your state

Read, update and subscribe anywhere in the global state with optics.

With properties or custom selectors, decompose your state as suits you with full type-safety and code completion.

With optics, focusing on deeply nested values makes updating them effortless.

Decouple components from global state

Declare optics in the component's props to explicit its dependencies to external state.

The component describes what it needs from the global state, it doesn't care about the how or the where.

Components decoupled from external state stay composable and testable, the way they're meant to be.

Compose state graphs

Use optics to express relations between entities.

No more plain ids and manual denormalization, optics act like references to other entities in your state.
Lets you represent your state as a graph that is dynamic, type-safe and reactive.

Anywhere you focus in the graph get the value automatically denormalized for you.