State

packages/example/src/views/post/VPost.tsx

@@ -1,5 +1,5 @@
 import { Post } from "@/domain"
-import { Chunk, Effect, Ref } from "effect"
+import { Effect } from "effect"
 import { PostsState } from "../posts/services"
 import { Reffuse } from "./reffuse"
 
@@ -22,7 +22,7 @@ export function VPost({ post, index }: VPostProps) {
 
             <button
                 onClick={() => PostsState.PostsState.pipe(
-                    Effect.flatMap(({ posts }) => Ref.update(posts, Chunk.remove(index))),
+                    Effect.flatMap(state => state.remove(index)),
                     runSync,
                 )}
             >

packages/example/src/views/posts/services/PostsState.ts

@@ -1,7 +1,15 @@
 import { Post } from "@/domain"
-import { Chunk, Context, SubscriptionRef } from "effect"
+import { Chunk, Context, Effect, Layer, Ref, SubscriptionRef } from "effect"
 
 
 export class PostsState extends Context.Tag("PostsState")<PostsState, {
     readonly posts: SubscriptionRef.SubscriptionRef<Chunk.Chunk<Post.Post>>
+    readonly remove: (index: number) => Effect.Effect<void>
 }>() {}
+
+export const make = (posts: Chunk.Chunk<Post.Post>) => Layer.effect(PostsState, SubscriptionRef.make(posts).pipe(
+    Effect.map(posts => ({
+        posts,
+        remove: (index: number) => Ref.update(posts, Chunk.remove(index)),
+    }))
+))