Tips on how to plug-in NWPathMonitor the right, composable way

[bdolewski]

Hi everyone!

I'd like to implement "reachability" feature into my app. I modeled AppState to contain a property telling entire app if there is network connection or not. Also I'd like to switch to Airplane mode on iPhone and see immediate changes in UI.

I don't need copy-paste-ready solutions but some guidelines/tips would be welcome. I have no idea how to deal with that using Composable Architecture.

I was looking for similar examples in repository but couldn't find anything.

Questions (see marker in code):

1. How to get the first, initial state of NWMonitor?
2. How to get actions from NetworkMonitor?

Main file

import SwiftUI
import ComposableArchitecture

@main
struct ComposableReachabilityApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView(
                store: Store(
                    // MARK: - Question 1
                    initialState: AppState(connectivity: NetworkMonitor.live.status),
                    reducer: appReducer,
                    environment: AppEnvironment.live
                )
            )
        }
    }
}

** ContentView**

import SwiftUI
import Network
import ComposableArchitecture

final class NetworkMonitor {
    @Published var status: Connectivity
    
    init() {
        self.monitor = NWPathMonitor()
        let queue = DispatchQueue(label: "\(Self.self)")
        
        // this is messy because `currentPath` can give be out-of-date
        // and `pathUpdateHandler` may be called any time with better value
        self.status = monitor.currentPath.status == .satisfied ? .online : .offline
        self.monitor.pathUpdateHandler = { [weak self] path in
            self?.status = path.status == .satisfied ? .online : .offline
            print("status: \(path.status)")
        }
        
        self.monitor.start(queue: queue)
    }
    
    private let monitor: NWPathMonitor
}

extension NetworkMonitor {
    static let live = NetworkMonitor()
}

enum Connectivity: CustomStringConvertible {
    case online
    case offline
    
    var description: String {
        switch self {
        case .online: return "online"
        case .offline: return "offline"
        }
    }
}

struct AppState: Equatable {
    var connectivity: Connectivity
}

enum AppAction {
    case connectivityChanged(Connectivity)
}

struct AppEnvironment {
    var reachability: NetworkMonitor
}

extension AppEnvironment {
    static let live = AppEnvironment(reachability: .live)
}

let appReducer = Reducer<AppState, AppAction, AppEnvironment> { state, action, environment in
    
    switch action {
    case .connectivityChanged:
        // MARK: - Question 2
        return .none
    }
}

struct ContentView: View {
    let store: Store<AppState, AppAction>
    
    var body: some View {
        WithViewStore(store) { viewStore in
            Text("Connectivity is: \(viewStore.connectivity.description)")
                .padding()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView(
            store: Store(
                initialState: AppState(connectivity: .offline),
                reducer: appReducer,
                environment: AppEnvironment.live
            )
        )
    }
}

[mbrandonw]

Hi there, I'm going to convert this to a discussion since it's not an issue with the library.

[siejkowski]

Question 1:
My usual approach is to send an action to kick things off when the app become active. It's very similar to what's done at https://github.com/pointfreeco/swift-composable-architecture/blob/main/Examples/CaseStudies/SwiftUICaseStudies/02-Effects-LongLiving.swift.

Question 2:
The easiest way is to subscribe to a Combine Publisher exposed by NetworkMonitor API.

A draft to get you started:

let appReducer = Reducer<AppState, AppAction, AppEnvironment> { state, action, environment in
    
    switch action {
    case .connectivityChanged(let newConnectivity):
        state.connectivity = newConnectivity
        return .none

    case .appDidBecomeActive:
        state.connectivity = environment.reachability.status // <- set an initial state if needed, question 1
        return environment.reachability
            .$status // <- this is a Combine Publisher exposed by your NetworkMonitor, question 2
            .map { AppAction.connectivityChanged($0) }
            .cancellable(id: ReachabilityNotificationId())

    case .appDidBecomeInactive:
        return .cancel(id: ReachabilityNotificationId())
  }

[nikitamounier]

Here's what your dependency could look like:

enum Connectivity {
    case online
    case offline
}

struct PathMonitorClient {
    var start: () -> Effect<Connectivity, Never>
    var stop: () -> Effect<Never, Never>
}

extension PathMonitorClient {
    static var live: Self {
        var pathMonitor: NWPathMonitor?
        
        return Self(
            start: {
                .run { subscriber in
                    pathMonitor = NWPathMonitor()
                    
                    pathMonitor?.pathUpdateHandler = { path in
                        switch path.status {
                        case .satisfied:
                            subscriber.send(.online)
                        case .unsatisfied:
                            subscriber.send(.offline)
                        }
                    }
                    
                    pathMonitor?.start(queue: queue)
                    
                    return AnyCancellable {
                        pathMonitor?.cancel()
                        pathMonitor = nil
                    }
                }
            },
            stop: {
                .fireAndForget {
                    pathMonitor?.cancel()
                    pathMonitor = nil
                }
            }
        )
    }
    
    static let mock = Self( /* ... */ )
}

private let queue: DispatchQueue {
    var increment: Int = 0
    defer { increment += 1 }
    return DispatchQueue(label: "PathMonitorQueue-\(increment)")
}

The static Effect.run function essentially allows you to create long-living effects where you can send many values over time to the reducer. Effect.fireAndForget lets you run a side effect without needing to return anything – that's why the return value of the effect is Never. When you call the .stop() method in your reducer, you'll need to add .fireAndForget() to convert it into an AppAction.

You'd hold the PathMonitorClient in your environment struct, and then call the .start() method in your reducer. Then, you can .map() on it and do whatever you wish!

I know you didn't want any copy-paste solutions (😅 sorry), but modelling dependencies in TCA is definitely difficult – I'd advise scanning through the isowords codebase (check out any folders ending "...Client"), and also the Examples directory in this repo for more examples of how to harness dependencies in TCA.

Let me know if you have any other questions!

[PeterKaminski09]

Just my 2-cents, and for what it's worth I'm using TCA 0.16.0

You can model NWPath as a TCA module using the examples above, and that may fit your use case well. But what I've found in practice is that having to set up all the boilerplate in every view/state that you'd possibly need access to the Connectivity status is heavy handed.

You'd need to have each submodule/substate you care about subscribe to the Publisher and also remember to cancel that subscription (otherwise you may get fatal assertion errors if you receive these events when your submodule is nil)

I've found it so much easier to pass around the Connectivity status as an @EnvironmentObject in the View hierarchy and inject that at the AppState level. If you're really just trying to drive your user interface, this works really well.