Visualize Combine Magic with SwiftUI Part 3

See Combine Merge and Append in Action

Kevin Cheng
3 min readOct 29, 2019

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.

Declare states

@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.

Make it general

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.

Now, lets merge and append

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

What are the differences between Merge and Append?

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

Next chapter: what are the differences between Zip and CombineLatest?

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.

--

--