SwifTEA UI - Unidirectional data flow with SwiftUI and WeeDux

SwifTEA UI
kevin o’neillemail: kevin@oneill.id.au twitter: @kevinoneill

About Me

Swift, Go, Typescript, Python
I write software

I play music

I ride mountain bikes*

The Elm Architecture (TEA)

(Model, Message) -> (Model, Command)

Model

Message

Command

TEA vs FLUX (Redux)

(Model, Message) -> Model

Lacks Side Effect Handling

SwifTEA UI

Quick Demo

WeeDux

(Model, Message) -> (Model*, Command)

struct ApplicationModel: Codable {
enum CodingKeys: String, CodingKey {
case categories
case quotes
}
struct Cache {
typealias Images = [String: Resource<UIImage>]
var images: Images = [:]
var log: [ApplicationMessage] = []
}
typealias Categories = Resource<[QuoteCategory]>
typealias Quotes = [String: Resource<Quote>]
var categories: Categories = .placeholder
var quotes: Quotes = [:]
var cache: Cache = Cache()
}
Model

enum QuoteMessage: ApplicationMessage {
case categoriesLoading
case categoriesLoadingFailed(error: QuoteServiceError)
case categoriesLoaded(categories: [QuoteCategory])
case quoteLoading(category: String)
case quoteLoadingFailed(category: String, error: QuoteServiceError)
case quoteLoaded(category: String, quote: Quote)
}
Quote Message

private let categoriesLoading = ApplicationReducer(path: .categories) { state,
message in
guard
let message = message as? QuoteMessage,
case .categoriesLoading = message
else { return }
state = .loading
}
.categoriesLoading Handler

func createApplicationMessageHandler() -> ApplicationMessageHandler {
quoteMessageHandler <> imageMessageHandler <> logger
}
Application Message Handler

Ergonomics

message in
guard
else { return }
state = .loading
}
state is an inout parameter

message in
guard
else { return }
state = .loading
}
KeyPaths for model access

typealias ApplicationProgram = Program< 
ApplicationEnvironment, ApplicationModel, ApplicationMessage>
typealias ApplicationCommand = Command< 
ApplicationEnvironment, ApplicationMessage>
typealias ApplicationMessageHandler = MessageHandler< 
ApplicationEnvironment, ApplicationModel, ApplicationMessage>
typealias ApplicationReducer = Reducer< 
ApplicationModel, ApplicationMessage>
Typealias for the win

message in
guard
else { return }
state = .loading
}
Reduced Noise

SwiftUI
Declarative Views + Reactive State

SwifTEA UI 
WeeDux + SwiftUI

Four Components 
 
Store, Dispatcher 
StoreContainer, StateContainer

public final class Store<Environment, Model, Message>: ObservableObject {
public final class Dispatcher: ObservableObject { … }
@Published public private(set) var model: Model
public let dispatcher: Dispatcher
private var subscription: Cancellable?
public init(program: Program<Environment, Model, Message>) {
model = program.read()
dispatcher = Dispatcher(program: program)
subscription = program
.receive(on: RunLoop.main)
.sink { [weak self] value in
self?.model = value
}
}
deinit {
subscription?.cancel()
}
}
Store

self?.model = value
}
}
deinit {
}
}
Tracks & Publishes Program Updates

self?.model = value
}
}
deinit {
}
}
Always Delivers on Main

public final class Dispatcher: ObservableObject {
private let program: Program<Environment, Model, Message>
public func send(_ message: Message) {
program.dispatch(message)
}
public func send(_ command: WeeDux.Command<Environment, Message>) {
program.execute(command)
}
init(program: Program<Environment, Model, Message>) {
self.program = program
}
}
Dispatcher

public final class Dispatcher: ObservableObject {
private let program: Program<Environment, Model, Message>
public func send(_ message: Message) {
program.dispatch(message)
}
public func send(_ command: WeeDux.Command<Environment, Message>) {
program.execute(command)
}
init(program: Program<Environment, Model, Message>) {
self.program = program
}
}
Send Messages and Commands

Containers 
Separating Views from State Location

struct StoreContainer<Environment, State, Message, Content>: View where Content: View {
@ObservedObject private var store: Store<Environment, State, Message>
private let content: () -> Content
var body: some View {
content()
.environmentObject(self.store)
.environmentObject(self.store.dispatcher)
}
init(for store: Store<Environment, State, Message>, content: @escaping () -> Content) {
self.store = store
self.content = content
}
}
StoreContainer

struct StoreContainer<Environment, State, Message, Content>: View where Content: View {
@ObservedObject private var store: Store<Environment, State, Message>
private let content: () -> Content
content()
.environmentObject(self.store)
.environmentObject(self.store.dispatcher)
}
init(for store: Store<Environment, State, Message>, content: @escaping () -> Content) {
self.store = store
self.content = content
}
}
Shares the Store and Dispatcher

struct StateContainer<Environment, State, Message, Props, Content>: View  
where Content: View {
typealias Dispatcher = Store<Environment, State, Message>.Dispatcher
@EnvironmentObject private var store: Store<Environment, State, Message>
@EnvironmentObject private var dispatcher: Dispatcher
private let read: (State) -> Props
private let render: (Props, Dispatcher) -> Content
public init(read: @escaping (State) -> Props,  
render: @escaping (Props, Dispatcher) -> Content) {
self.read = read
self.render = render
}
public var body: some View {
render(read(store.model), dispatcher)
}
}
State Container

self.read = read
}
}
}
Captures Store and Dispatcher

self.read = read
}
}
}
Converts State to Some Type

self.read = read
}
}
}
Renders the View with Some Type

extension StateContainer {
public init(_ keypath: KeyPath<State, Props>,
self.init(read: { $0[keyPath: keypath] }, render: render)
}
public init<A, B>(_ a: KeyPath<State, A>,
_ b: KeyPath<State, B>,
render: @escaping ((A, B), Dispatcher) -> Content)
where Props == (A, B) {
self.init(read: { ($0[keyPath: a], $0[keyPath: b]) }, render: render)
}
…
}
KeyPaths

typealias ApplicationStoreContainer<Content> =  
StoreContainer<ApplicationEnvironment, ApplicationModel, ApplicationMessage, Content>
where Content: View 
 
typealias ApplicationStateContainer<Props, Content> =
StateContainer<ApplicationEnvironment, ApplicationModel, ApplicationMessage, Props, Content>
where Content: View
Typealias’ !!

Why are Store and Dispatcher Split?

A Couple of Patterns

Container / ViewModel / Body

struct CategoryList: View {
struct ViewModel { .. }
ApplicationStateContainer(.categories) { categories, dispatcher in
CategoryListBody(model: ViewModel(model: categories, dispatcher: dispatcher))
}
}
}
Container

struct ViewModel {
private let dispatcher: ApplicationStore.Dispatcher
let categories: ApplicationModel.Categories 
func refresh(force _: Bool = false) {
dispatcher.send(QuoteCommands.refreshCategories)
}
init(categories: ApplicationModel.Categories, dispatcher: ApplicationStore.Dispatcher) {
self.categories = categories
self.dispatcher = dispatcher
}
}
View Model

struct CategoryListBody: View {
let model: CategoryList.ViewModel
ResourcePanel(model.categories) { categories in
List {
ForEach(categories, id: .id) { category in
NavigationLink(destination: QuoteView(category: category)) {
Text(category.title)
}
}
}
}
.padding()
.navigationBarTitle("Quote of the day")
}
}
Body

Not an @ObservedObject or
ObservableObject in sight

@State is still useful for local data

Asyc Operations are Commands

.background(
ResourcePanel(self.model.background, style: .hidden) {
Image(uiImage: $0)
.resizable()
.aspectRatio(contentMode: ContentMode.fill)
}
)
Image Loading

private func refreshBackground(quote: Quote, force _: Bool = false) {
guard let image = images[quote.background] else {
return dispatcher.send(ImageCommands.load(location: quote.background))
}
switch image {
case .failed, .placeholder:
return dispatcher.send(ImageCommands.load(location: quote.background))
default:
break
}
}
Check availability in the Model

ApplicationStateContainer(.quotes, .cache.images) { props, dispatcher in
QuoteViewBody(model:ViewModel( 
category: self.category,
quotes: props.0,
images: props.1,
dispatcher: dispatcher))
}
}
The Container Binds

static func load(location: String) -> ApplicationCommand {
ApplicationCommand { _, publish in
guard let url = URL(string: location) else {
return publish(ImageMessage.failed(location: location, message: "invalid url"))
}
let task = URLSession.shared.dataTask(with: url) { (data, response, error) -> Void in
… 
guard let image = UIImage(data: data) else {
return publish(ImageMessage.failed(location: location, message: … }
return publish(ImageMessage.loaded(location: location, image: image))
}
publish(ImageMessage.loading(location: location))
task.resume()
}
The Command Loads the Image

private let loaded = ApplicationReducer(path: .cache.images) { state, message in
guard
let message = message as? ImageMessage,
case let .loaded(location, image) = message
else { return }
state[location] = .available(image)
}
The Event Handler Updates the State

A Subtle Implementation 
Anti-Pattern

Commands should interact with the
outside world via the Environment

Summary

Find the code at: 
https://github.com/weegigs/qotd

Questions

SwifTEA UI - Unidirectional data flow with SwiftUI and WeeDux

Recommended

Recommended

More Related Content

Similar to SwifTEA UI - Unidirectional data flow with SwiftUI and WeeDux

Similar to SwifTEA UI - Unidirectional data flow with SwiftUI and WeeDux (20)

More from Kevin O'Neill

More from Kevin O'Neill (6)

SwifTEA UI - Unidirectional data flow with SwiftUI and WeeDux