@@ -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
|
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.
|
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
|
The usual pattern is to create state with Effect primitives such as
|
||||||
`SubscriptionRef`, turn that primitive into a Lens with a matching constructor
|
`SubscriptionRef`, turn that primitive into a Lens with a matching constructor
|
||||||
such as `Lens.fromSubscriptionRef`, and bind Lens values into components with
|
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.
|
`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
|
## Where To Store State
|
||||||
|
|
||||||
State can live pretty much anywhere as a `Lens` or `View`: in a
|
State can live pretty much anywhere as a `Lens` or `View`: in a
|
||||||
@@ -43,7 +43,7 @@ class CounterState extends Context.Service<
|
|||||||
>()("CounterState") {
|
>()("CounterState") {
|
||||||
static readonly layer = Layer.effect(
|
static readonly layer = Layer.effect(
|
||||||
CounterState,
|
CounterState,
|
||||||
Effect.gen(function* () {
|
Effect.gen(function*() {
|
||||||
const count = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(0))
|
const count = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(0))
|
||||||
|
|
||||||
return { count } as const
|
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 state = yield* CounterState
|
||||||
const [count] = yield* View.useAll([state.count])
|
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 { Effect, SubscriptionRef } from "effect"
|
||||||
import { Component, Lens, View } from "effect-view"
|
import { Component, Lens, View } from "effect-view"
|
||||||
|
|
||||||
const LocalCounterView = Component.make("LocalCounter")(function* () {
|
const LocalCounterView = Component.make("LocalCounter")(function*() {
|
||||||
const state = yield* Component.useOnMount(() =>
|
const state = yield* Component.useOnMount(() =>
|
||||||
Effect.gen(function* () {
|
Effect.gen(function*() {
|
||||||
const count = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(0))
|
const count = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(0))
|
||||||
|
|
||||||
return { count } as const
|
return { count } as const
|
||||||
@@ -106,7 +106,7 @@ class CounterState extends Context.Service<
|
|||||||
>()("CounterState") {
|
>()("CounterState") {
|
||||||
static readonly layer = Layer.effect(
|
static readonly layer = Layer.effect(
|
||||||
CounterState,
|
CounterState,
|
||||||
Effect.gen(function* () {
|
Effect.gen(function*() {
|
||||||
const count = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(0))
|
const count = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(0))
|
||||||
const doubled = View.map(count, (n) => n * 2)
|
const doubled = View.map(count, (n) => n * 2)
|
||||||
|
|
||||||
@@ -179,7 +179,7 @@ class FormState extends Context.Service<
|
|||||||
>()("FormState") {
|
>()("FormState") {
|
||||||
static readonly layer = Layer.effect(
|
static readonly layer = Layer.effect(
|
||||||
FormState,
|
FormState,
|
||||||
Effect.gen(function* () {
|
Effect.gen(function*() {
|
||||||
const name = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(""))
|
const name = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(""))
|
||||||
|
|
||||||
return { name } as const
|
return { name } as const
|
||||||
@@ -231,7 +231,7 @@ class ProfileState extends Context.Service<
|
|||||||
>()("ProfileState") {
|
>()("ProfileState") {
|
||||||
static readonly layer = Layer.effect(
|
static readonly layer = Layer.effect(
|
||||||
ProfileState,
|
ProfileState,
|
||||||
Effect.gen(function* () {
|
Effect.gen(function*() {
|
||||||
const profile = Lens.fromSubscriptionRef(
|
const profile = Lens.fromSubscriptionRef(
|
||||||
yield* SubscriptionRef.make<UserProfile>({
|
yield* SubscriptionRef.make<UserProfile>({
|
||||||
name: "",
|
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 state = yield* ProfileState
|
||||||
const [name, setName] = yield* Lens.useState(state.name)
|
const [name, setName] = yield* Lens.useState(state.name)
|
||||||
const [role] = yield* View.useAll([state.role])
|
const [role] = yield* View.useAll([state.role])
|
||||||
|
|||||||
Reference in New Issue
Block a user