diff --git a/packages/docs/docs/state-management.md b/packages/docs/docs/state-management.md index a186652..19285e8 100644 --- a/packages/docs/docs/state-management.md +++ b/packages/docs/docs/state-management.md @@ -11,6 +11,11 @@ A Lens is an effectful handle to a piece of state. It can read the current value subscribe to changes, and write updates back to the underlying source. A Lens can point at a whole state object or focus on one nested field inside it. +`effect-view` re-exports the `Lens` and `View` modules from +[`effect-lens`](https://github.com/Thiladev/effect-lens) for convenience. The +core data model and transformation APIs belong to `effect-lens`, so check the +[`effect-lens` documentation](https://github.com/Thiladev/effect-lens/tree/master/packages/effect-lens) for the full Lens/View API. + The usual pattern is to create state with Effect primitives such as `SubscriptionRef`, turn that primitive into a Lens with a matching constructor such as `Lens.fromSubscriptionRef`, and bind Lens values into components with @@ -18,11 +23,6 @@ such as `Lens.fromSubscriptionRef`, and bind Lens values into components with `View` is the read-only side of this model. Every Lens is also a View. -`effect-view` re-exports the `Lens` and `View` modules from -[`effect-lens`](https://github.com/Thiladev/effect-lens) for convenience. The -core data model and transformation APIs belong to `effect-lens`, so check the -[`effect-lens` documentation](https://github.com/Thiladev/effect-lens/tree/master/packages/effect-lens) for the full Lens/View API. - ## Where To Store State State can live pretty much anywhere as a `Lens` or `View`: in a @@ -43,7 +43,7 @@ class CounterState extends Context.Service< >()("CounterState") { static readonly layer = Layer.effect( CounterState, - Effect.gen(function* () { + Effect.gen(function*() { const count = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(0)) return { count } as const @@ -51,7 +51,7 @@ class CounterState extends Context.Service< ) } -const CounterValueView = Component.make("CounterValue")(function* () { +const CounterValueView = Component.make("CounterValue")(function*() { const state = yield* CounterState const [count] = yield* View.useAll([state.count]) @@ -67,9 +67,9 @@ hierarchy of subcomponents that receive it through props, create it with import { Effect, SubscriptionRef } from "effect" import { Component, Lens, View } from "effect-view" -const LocalCounterView = Component.make("LocalCounter")(function* () { +const LocalCounterView = Component.make("LocalCounter")(function*() { const state = yield* Component.useOnMount(() => - Effect.gen(function* () { + Effect.gen(function*() { const count = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(0)) return { count } as const @@ -106,7 +106,7 @@ class CounterState extends Context.Service< >()("CounterState") { static readonly layer = Layer.effect( CounterState, - Effect.gen(function* () { + Effect.gen(function*() { const count = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(0)) const doubled = View.map(count, (n) => n * 2) @@ -179,7 +179,7 @@ class FormState extends Context.Service< >()("FormState") { static readonly layer = Layer.effect( FormState, - Effect.gen(function* () { + Effect.gen(function*() { const name = Lens.fromSubscriptionRef(yield* SubscriptionRef.make("")) return { name } as const @@ -231,7 +231,7 @@ class ProfileState extends Context.Service< >()("ProfileState") { static readonly layer = Layer.effect( ProfileState, - Effect.gen(function* () { + Effect.gen(function*() { const profile = Lens.fromSubscriptionRef( yield* SubscriptionRef.make({ name: "", @@ -247,7 +247,7 @@ class ProfileState extends Context.Service< ) } -const ProfileNameView = Component.make("ProfileName")(function* () { +const ProfileNameView = Component.make("ProfileName")(function*() { const state = yield* ProfileState const [name, setName] = yield* Lens.useState(state.name) const [role] = yield* View.useAll([state.role])