Cancelling other work

[rcarver]

The new Task-based effect lifecycle is amazing, it solves so many issues with presentation of optional state. There's a few scenarios that still felt awkward so wanted share an idea (or maybe there's already a way to do this?)

---

By using this pattern to tie long-living effects to the life of the view, any effects returned by the .task action are cancelled automatically:

Text("Hello")
  .task { await viewStore.send(.task).finish() } 

But sometimes you need to do other things when the view disappears:

1. Cancel some other effect. A effect that wasn't started in the .task action but still needs to be cancelled.
2. Perform some work. For example, to call something in the environment.

These methods on Effect seem to do the trick:

extension Effect where Failure == Never {
    /// Cancel another effect by ID when this effect is cancelled.
    public static func cancelling(id: AnyHashable) -> Self {
        .fireAndForget {
            do {
                try await Task.never()
            } catch is CancellationError {
                await Task.cancel(id: id)
            }
        }
    }
    /// Cancel another effect by ID when this effect is cancelled.
    public static func cancelling(id: Any.Type) -> Self {
        .fireAndForget {
            do {
                try await Task.never()
            } catch is CancellationError {
                await Task.cancel(id: id)
            }
        }
    }
    /// Perform work when this effect is cancelled.
    public static func finish(
        _ work: @escaping @Sendable () async throws -> Void
    ) -> Self {
        .fireAndForget {
            do {
                try await Task.never()
            } catch is CancellationError {
                try? await work()
            }
        }
    }
}

---

Here's an example of using cancelling(id:)

case .viewChangedSize(let size, let displayScale):
    return .task { [root = state.root] in
        .generatedPanelsResponse(.success(try await environment.sparrowExportClient.generatePanels(.init(
            export: .init(name: "Panels", root: root),
            options: .init(size: .screen(size: size, displayScale: displayScale))
        ))))
    } catch: {
        .generatedPanelsResponse(.failure($0))
    }
    .cancellable(id: GenerateTaskID.self, cancelInFlight: true)
case .task:
    return .cancelling(id: GenerateTaskID.self)

Here's an example of using .finish. The eyedropper feature is managed in the environment to coordinate among several components. When the view appears we show it if the state tells us to. When the view disappears we always hide it.

case .task:
    return .merge(
        .fireAndForget { [isEyedropper = state.isEyedropperActive] in
            await environment.eyedropperClient.send(isEyedropper ? .visible : .hidden)
        },
        .run { send in
            for await value in await environment.eyedropperClient.read() {
                await send(.eyedropperResponse(value))
            }
        },
        .finish {
            await environment.eyedropperClient.send(.hidden)
        }
    )
}

[mbrandonw]

Hey @rcarver, thanks for sharing! These are handy tools to have, and we have made use of some adhoc versions of these in our own work too.

Also, our upcoming navigation tools will bake a lot of this logic directly into the APIs so you won't even have to think about cancellation. We hope to have some stuff to share soon.

[rcarver]

I can't wait to see what you've got cooking!