Update SwiftUI List after network request using RxSwift

Question

I need to update a SwiftUI List after making a network request. For requests, I use Moya approach with combination of triggers(Input&Output - "Kickstarter"). I cant use Combine framework due to the structure of the project, while they have a lot of helpful advises(not sure about my case).

Simple ContactList:

struct ContactList: View {
    var viewModel: UserViewModel
    var body: some View {
        NavigationView {
            List(viewModel.users) { contact in
                NavigationLink(destination: ContactDetail(user: contact)) {
                    ContactRow(user: contact)
                }
            }
            .navigationBarTitle(Text("Team Members"))
        }
    }
}

Then ViewModel

class UserViewModel {
    let disposeBag = DisposeBag()
    var users: [TeamMember] = []

    init(users: [TeamMember] = []) {
        let networkModel = UserNetworkModel()
        networkModel.output.teamMembers.subscribe { (event) in
            self.users.append(contentsOf: event.element.orEmpty)
        }.disposed(by: disposeBag)

        networkModel.output.error.subscribe(onNext: { error in
            print(error.localizedDescription)
        }).disposed(by: disposeBag)
        networkModel.input.loadTrigger.onNext(Void())
        self.users = users
    }
}

And NetworkModel

class UserNetworkModel {
    let disposeBag = DisposeBag()
    let input: Input
    let output: Output

    struct Input {
        let loadTrigger: AnyObserver<Void>
        let searchTrigger: AnyObserver<String>
    }

    struct Output {
        let teamMembers: Observable<[TeamMember]>
        let error: Observable<Error>
    }


    internal let loadSubject = PublishSubject<Void>()
    internal let searchSubject = BehaviorSubject<String>(value: "")

    internal let errorSubject = PublishSubject<Error>()
    internal let teamMembersSubject = BehaviorSubject<[TeamMember]>(value: [])

    init() {
        let service = MoyaProvider<TeamTarget>()
        self.input = Input(loadTrigger: loadSubject.asObserver(), searchTrigger: searchSubject.asObserver())
        self.output = Output(teamMembers: teamMembersSubject.asObservable(), error: errorSubject.asObservable())

        let result = loadSubject.flatMapLatest { _ -> Observable<[TeamMember]> in
            service.rx.request(.get).debug().mapArray(TeamMember.self).asObservable()
        }.share(replay: 1)

        Observable.combineLatest(result, searchSubject).map { (arg) in
            let (members, filter) = arg
            if filter.isEmpty {
                return members
            } else {
                let searchText = try! self.searchSubject.value()
                return members.filter({
                    return [$0.firstName, $0.lastName]
                        .compactMap({ $0 })
                        .first(where: { $0.hasPrefix(searchText) }) != nil
                })
            }
        }.bind(to: teamMembersSubject).disposed(by: disposeBag)

        result.subscribe(onError: { error in
            self.errorSubject.onNext(error)
        }).disposed(by: self.disposeBag)

    }
}

Is it possible to update users array in this way? Or only Combine can do it for me easily? Thanks for your time.

Ksenya Ksenya · Accepted Answer · 2019-12-20T15:14:44

While I've found some Combine solution. Still waiting for Rx solution. So, I fixed it just added @ObservedObject for ContactList property and @Published for users' array in Network model. Much less code, natively but not what I was looking for.

Full answer:

struct ContactList: View {
    @ObservedObject var networkModel: NetworkModel
    var body: some View {
        NavigationView {
            List(networkModel.users) { contact in
                NavigationLink(destination: ContactDetail(user: contact)) {
                    ContactRow(user: contact)
                }
            }
            .navigationBarTitle(Text("Team Members"))
        }
    }
}

#if DEBUG
struct ContactList_Previews: PreviewProvider {
    static var previews: some View {
        ContactList(networkModel: .init(users: contactData))
    }
}
#endif

class NetworkModel: ObservableObject {
    @Published var users = [User]()

    init(users: [User] = []) {
        getMembers()
    }

    private func getMembers() {
        let provider = MoyaProvider<TeamTarget>()
        provider.request(.get) { [weak self] (result) in
           switch result {
           case .success(let response):
                do {
                   let result = try JSONDecoder().decode([User].self, from: response.data)
                   self?.users.append(contentsOf: result)
                } catch {
                   print(error.localizedDescription)
                }
           case .failure(let error):
                print(error.errorDescription.orEmpty)
           }
        }
    }
}

Update SwiftUI List after network request using RxSwift

1 Answers