Share the Same Broadcaster Values Across Multiple Listeners

Limit to a Single Shared Broadcaster Each New Event

Combine Two Broadcasters to Compare Values

Compose Operators to Implement Game Logic

Fetch New Data Based on Conditions

Create an Initialize Operator to Clear an Input Field

Combine Broadcasters in Logical Order

Refactor Game State to a Single Repeating Broadcaster

Check Broadcasters Are Properly Cancelled in Operators

Organizing Operators and Cleaning Up

Walkthrough the Data Flow of the Word Game

Exploring the Patterns in the Operators

Comparing Similarities with Popular Async Libraries

Implementing a Word Game with Patterns and React

Because share captures and sets up a broadcaster it also needs to know when to set up a new broadcaster. You need to make sure the previous broadcaster is reused unless you explicitly cancel it. Otherwise, multiple broadcasters will be set up when you only want one. This lesson walks through limiting the set up for a broadcaster to you only when a previous broadcaster has not been defined.

Instructor: [0:00] Now because time is the hidden variable, there is a bug in here which you cannot see. That's because if you call share again, it's going to set up the broadcaster again. Let's set up that scenario with a simple button.

[0:16] We'll just make a button and say Load word and add an OnClick, and we'll set up an OnClick useListener, so OnClick useListener. Now, get word will have to take OnClick as an argument. We'll pass that in, OnClick and OnClick. Since we're switching from a click to this broadcaster, we're going to have to wrap this whole thing in our map broadcaster.

[0:48] The events will simply map over to that broadcaster. This OnClick is the argument going into here. Then instead of events doing anything, it will switch over to loading a word.

[1:02] Make sure to import MapBroadcaster and we need to import useListener as well. Let's save. When I click Load Word now, you'll see two separate words again. The reason is, because this share is now in the wrong spot. We're going to have to wrap this around this entire thing, whereas before, it was just grabbing this broadcaster.

[1:26] Let's go ahead and wrap this with the pipe and add our share right here. I'll hit Save to with that format, I'll click Load Word, and you'll see something weird. It loaded two words that time. Let's try clicking again and see what happens. One, two, three, four words, five, six, seven, eight. That loaded a lot of words.

[1:53] Let's just make sure that it made all those requests, because that has to do with our broadcaster being setup multiple times. Now, to prevent that from happening, we're going to have to check if cancel already exists. Swift cancel is not defined. We'll just go ahead and wrap this. This will only set up one time.

[2:17] Now, I know that there's already a bug here. If I click this, it'll still load a bunch of words, because cancel from OnClick is coming from useListener, and we haven't setup a cancel function from useListener, since this is acting as a broadcaster.

[2:34] We'll go ahead and return a function here, which will set the listeners to an empty array just to fix that bug. Now, when I click Load Word, you'll see it loads one word and shares it across two paragraph tags. I'll click again, it loads one word. That's because now, cancel is defined. To prove that bug did exist, I'll go ahead and remove this cancel function from useListener.

[3:01] I'll click Load Word and you'll see it's loading tons of words because useListener is acting as a broadcaster and it needs to return some way of cancelling. Now we took care of that hidden variable of time which can easily bite you if something gets set up twice, or something doesn't get torn down correctly.

Course

Implementing a Word Game with Patterns and React

Limit to a Single Shared Broadcaster Each New Event

Share this video with your friends