Visualize Combine Magic with SwiftUI Part 3

See Combine Merge and Append in Action

Kevin Cheng
Oct 29, 2019 · 3 min read

Combine with Combine

In the previous chapter, we created a playground that helps us visualize one stream of data and one operator. We’ve seen how map, filter, scan and dropFirst worked there. In this chapter, we want to combine multiple streams of data into one stream. You might’ve already guessed, merge and append are this type of operators.

In order to visualize operators like merge and append, we created DoublePublisherStreamView who displays 3 streams simultaneously while the first 2 emitting values every second and the 3rd one emits values based on the 2 source streams.

@State private var stream1Values: [String] = []@State private var stream2Values: [String] = []@State private var streamResultValues: [String] = []

In chapter1 and chapter2, we maintain 2 arrays of values while the 1st one being the source-stream and 2nd one being the operated result. Here we need 2 sources to operate and add to the result stream.

var comparingPublisher: (AnyPublisher<String, Never>, AnyPublisher<String, Never>) -> (AnyPublisher<String, Never>)

As mentioned in chapter2, we aim to build a playground that is generic enough for us to just pass a Combine Publisher and then observe the results coming from operators. ComparingPublisher is a closure that provides 2 basic String Publisher and results in an operated Publisher.

We created 2 Publishers here to compare the differences of the 2 operators.

When I first started learning RxSwift, I have asked this kind of questions over and over again (Append is equal to Concat in RxSwift). Now that we can easily run this Combine examples and see the differences.

func mergePublisher(_ publisher1: AnyPublisher<String, Never>, _ publisher2: AnyPublisher<String, Never>) -> AnyPublisher<String, Never> {
Publishers.Merge(publisher1, publisher2).eraseToAnyPublisher()
}
func appendPublisher(_ publisher1: AnyPublisher<String, Never>,
_ publisher2: AnyPublisher<String, Never>) -> AnyPublisher<String, Never> {
publisher1.append(publisher2).eraseToAnyPublisher()
}

As you can see,

Merge emits values whenever either source stream emits values while Append emits values from the 1st stream and then from the 2nd stream in sequence.

Link to Source Code

Now we have started to see the power of the Combine playground. Let’s try answering more of these common Reactive related questions. In the next chapter, we want to be able to compare a different set of operators zip and combineLatest. Unlike merge and append who emit values in the same type with the source streams, zipandcombineLatest emit a tuple of types from both sources. As you can see, our current playground only displays one CircularView at a time. We’ll need to extend it. See you in next chapter Visualize Combine Magic with SwiftUI Part 4.


There are certainly more I can learn than share. Please drop a line if you resonate or disagree with anything you see here.

Flawless iOS

🍏 Community around iOS development, mobile design, and…

Kevin Cheng

Written by

iOS engineer / entrepreneur / freelancer / San Francisco

Flawless iOS

🍏 Community around iOS development, mobile design, and marketing

More From Medium

More from Flawless iOS

More from Flawless iOS

NSTimer vs CADisplayLink

More from Flawless iOS

More from Flawless iOS

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade