Reducing

Inner observables allow us to handle smaller "inner" events efficiently. Let's see how we can handle inner events using ‘from’ constructor, and ‘mergeMap’, ‘reduce’ operators.

We'll cover the following

Reducing streams

Now that the array of words is being flattened into separate events, we need some way of handling each of these smaller, “inner” events.

Effectively, two different streams of data are going on.

  • One is the same stream from before: every keystroke triggers an event containing the current content of the textbox.

  • The new stream is smaller (and finite), containing an event for every word in the textbox.

Mixing these two would be problematic: the view rendering function wouldn’t know whether a new word is a continuation of the inner stream, or represents the beginning of a new event from the original stream. There’s no way to know when to clear the page without adding obtuse hacks to your code.

Get hands-on with 1200+ tech skills courses.