@effect-atom/atom A reactive state management library for Effect. Installation If you are using React: bash pnpm add @effect-atom/atom-reac…
@effect-atom/atom A reactive state management library for Effect. Installation If you are using React: bash pnpm add @effect-atom/atom-reac…
A reactive state management library for Effect.
If you are using React:
pnpm add @effect-atom/atom-reactLet's create a simple Counter component, which will increment a number when you click a button.
We will use Atom.make to create our Atom, which is a reactive state container.
We can then use the useAtomValue & useAtomSet hooks to read and update the value
of the Atom.
…You can create derived state from an Atom in a couple of ways.
import { Atom } from "@effect-atom/atom-react"
const countAtom = Atom.make(0)
// You can use the `get` function to get the value of another Atom.
//
// The type of `get` is `Atom.Context`, which also has a bunch of other methods
// on it to manage Atoms.
//
const doubleCountAtom = Atom.make((get) => get(countAtom) * 2)
// You can also use the `Atom.map` function to create a derived Atom.
const tripleCountAtom = Atom.map(countAtom, (count) => count * 3)You can also pass effects to the Atom.make function.
When working with effectful Atoms, you will get back a Result type.
You can see all the ways to work with Result here: https://tim-smart.github.io/effect-atom/atom/Result.ts.html
import { Atom, Result } from "@effect-atom/atom-react"
import { Effect } from "effect"
// ┌─── Atom.Atom>
// ▼
const countAtom = Atom.make(Effect.succeed(0))
// You can also pass a function to get access to the `Atom.Context`
//
// `get.result` can be used in `Effect`s to get the value of an `Atom.Atom`.
//
// ┌─── Atom.Atom>
// ▼
const resultWithContextAtom = Atom.make(
Effect.fnUntraced(function* (get: Atom.Context) {
const count = yield* get.result(countAtom)
return count + 1
}),
)All Atoms that use effects are provided with a Scope, so you can add finalizers
that will be run when the Atom is no longer used.
import { Atom } from "@effect-atom/atom-react"
import { Effect } from "effect"
const resultAtom = Atom.make(
Effect.gen(function* () {
// Add a finalizer to the `Scope` for this Atom
// It will run when the Atom is rebuilt or no longer needed
yield* Effect.addFinalizer(() => Effect.log("finalizer"))
return "hello"
}),
)…This is useful for setting up Tracers, Loggers, ConfigProviders, etc.
import { Atom } from "@effect-atom/atom-react"
import { ConfigProvider, Layer } from "effect"
Atom.runtime.addGlobalLayer(
Layer.setConfigProvider(ConfigProvider.fromJson(import.meta.env)),
)Streams…………import { Atom } from "@effect-atom/atom-react"
import { Option, Schema } from "effect"
// Create an Atom that reads and writes to the URL search parameters.
//
// ┌─── Atom.Writable
// ▼
const simpleParamAtom = Atom.searchParam("paramName")
// You can also use a schema to further parse the value
//
// ┌─── Atom.Writable>
// ▼
const numberParamAtom = Atom.searchParam("paramName", {
schema: Schema.NumberFromString,
})import { Atom } from "@effect-atom/atom-react"
import { BrowserKeyValueStore } from "@effect/platform-browser"
import { Schema } from "effect"
const runtime = Atom.runtime(BrowserKeyValueStore.layerLocalStorage)
// Create an Atom that reads and writes to `localStorage`.
//
// It uses `Schema` to define the type of the value stored.
//
// ┌─── Atom.Writable
// ▼
const flagAtom = Atom.kvs({
runtime: runtime,
key: "flag",
schema: Schema.Boolean,
defaultValue: () => false,
})Reactivity from @effect/experimentalReactivity is an Effect service that allows you make queries reactive when
mutations happen.
You can use an Atom.runtime to hook into the Reactivity service and trigger
Atom refreshes when mutations happen.
…@effect/rpc integrationYou can use the AtomRpc module to create an RPC client with integration with
effect-atom. It offers apis for both queries and mutations.
…HttpApi integrationYou can use the AtomHttpApi module to create an HTTP API client with
integration with effect-atom. It offers apis for both queries and mutations.
…No open issues yet, or sync has not completed.