diff --git a/packages/docs/docs/state-management.md b/packages/docs/docs/state-management.md index 72f0f7c..c1f685e 100644 --- a/packages/docs/docs/state-management.md +++ b/packages/docs/docs/state-management.md @@ -22,8 +22,10 @@ core data model and transformation APIs belong to `effect-lens`, so check the ## Where To Store State -State can live pretty much anywhere: in a service, in a layer, in a component -scope, or in plain React state. Pick the owner based on who needs the state. +State can live pretty much anywhere as a `Lens` or `Subscribable`: in a +service, in a layer, in a component scope, or alongside plain React state. Pick +the owner based on who needs the state. Once you have a Lens/Subscribable +handle, pass it around however you like, including through React props. If state is shared by multiple components or belongs to application logic, store it in an Effect service: @@ -56,10 +58,14 @@ import { Effect, SubscriptionRef } from "effect" import { Component, Lens, Subscribable } from "effect-fc" const LocalCounterView = Component.make("LocalCounter")(function* () { - const countLens = yield* Component.useOnMount(() => - Effect.map(SubscriptionRef.make(0), Lens.fromSubscriptionRef), + const state = yield* Component.useOnMount(() => + Effect.gen(function* () { + const count = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(0)) + + return { count } as const + }), ) - const [count] = yield* Subscribable.useAll([countLens]) + const [count] = yield* Subscribable.useAll([state.count]) return
Count: {count}
})