Share the Same Broadcaster Values Across Multiple Listeners
To build out our word game, we will have to be able to share the word across a few places. This means we have to set up a broadcaster that will push the same values to multiple listeners instead of different values each time a listener is added. We will do this by creating a share operator that can capture the broadcaster and track all of the listeners so that we can hook them together and customize how values get pushed down into the listener callbacks.
Lecturer: [0:00] I'm going to move out all the new operators we've created. Select all of this and cut. Switch over to operators. It's going to paste these at the bottom. Make sure everything is exported. Here, here, and here. We'll type export. GetURL will be at broadcasters. Let's move that one over to our broadcasters. Paste that at the bottom. Export that.
[0:30] To switch over to our game I'm going to clear out everything in here. Clear out this and even the input for now. Just start from essentially nothing. I want to load a word from this URL, which will just give us an array with a single word in it.
[0:51] When I go to this URL, I'll get larky, I'll refresh, I'll get conventional, and get a random word each time. We'll set up a broadcaster called getWord and we'll bring in pipe. Let's re-import that from Lodash/FP, we'll import pipe, and the broadcaster is going to use get URL. I'll import that and paste in our URL.
[1:23] Since this is an array, we'll want to map. I'll import that, and essentially take the first result, which is the word and just remap it there. Another way of doing this using a Lodash utility is to use the head utility which takes the first result from an array. I can just say mapHead.
[1:52] Then I can drop getWord into a useBroadcaster. We'll call this word, and useBroadcaster, and drop in getWord. Then I can place my word inside of this div, hit save, and back in my project, you'll see a random word, which loads every time I refresh. Refresh again, and you'll see Barrett and other random words.
[2:19] Now, it's super important to note that if I were to take this, and I'll do two paragraph tags. I'll put one word here, and I'll duplicate this and we'll call this another word. I'll put another word here, hit save. You'll see two different words even though it's using the same broadcaster. This comes into play in our game where we load a word, which will display, but we'll also want to compare that word against our guesses.
[2:55] The line of thinking is we want to share this broadcaster, so that it doesn't get invoked twice, rather, if it gets invoked again, it's sharing that same broadcaster across all the listeners.
[3:07] What this share would look like will be a little bit familiar, because useListener use the same approach. Share can capture listeners. This is similar again, if you look at useListener. You'll see we're sharing listeners and invoking them all when a value comes through.
[3:27] I'll go back and setup a similar pattern where this is an operators would return to broadcaster and a listener, just as always. This time, we can capture the broadcaster. We'll wrap this, we can close over the broadcaster, and we can set it up right here where if a value comes through, we want to push that value to all of the listeners. For each listener and say, value goes into that listener.
[4:00] Now, we can capture listeners inside of here. We're going to say, listeners push listener and we'll still want to return a function that can cancel. Now setting up cancel on this scenario is something we'll have to capture up here.
[4:17] We'll say, let cancel, and then we can assign cancel right here, since this is setup outside of this. Then let's give this a try where I would place this after the map and just say, share.
[4:32] Since we're invoking this function, this will run before any of the other code runs, and it will capture this broadcaster and store it right here. When I hit save, you'll see that we get two of the same word and only one network request to get a single word.