Name: Walkthrough the Data Flow of the Word Game
Uploaded: 2020-09-30T16:43:42-05:00
Description: Understanding how all of the values flow through the application is critical to be able to properly handle each edge case. This lesson does one final walkthrough of how all the broadcasters are set up, how the data flows through the operators, then how broadcasters are canceled and set up again once the win condition is met.

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

Understanding how all of the values flow through the application is critical to be able to properly handle each edge case. This lesson does one final walkthrough of how all the broadcasters are set up, how the data flows through the operators, then how broadcasters are canceled and set up again once the win condition is met.

https://app.egghead.io/api/v1/lessons/javascript-walkthrough-the-data-flow-of-the-word-game/subtitles

John Lindquist: [0:00] The first thing it happens is this initialState is passed into use broadcaster, and initial is set as the state here. In the future, list broadcaster is set up, and we set up a listener where it invokes setState.

[0:16] This broadcaster is the game broadcaster right here, so this is going to start with getting the word using the getWord(broadcaster), which if you look at the getWord, you can see it starts with getURL.

[0:30] This will take this URL and fetch it, then pass that response on down, and that response is an array of strings. That array goes into here, and head will take off the first result, so it's just a string coming through.

[0:48] That string is going into the thenCombine, so thenCombine takes a broadcaster, and that string coming through is coming through right here, since it's returning map broadcaster and that broadcast we passed in is being hooked into the listeners.

[1:06] That value from the typing, which is the second broadcaster is onInput right there, pass through the guess pipe, where it gets the target value and when it repeats, it sets it to an empty string.

[1:20] That broadcaster inside of thenCombine will send those typing values and the word and the typing values we passed down as an array, where the word is the first value and the second value is what's been typed into the input box.

[1:37] Then, from there, in our game logic, we're logging it out just for debug purposes and then we're repeating if it matches some repeat logic. We pass in this function, which again, is comparing that word and guess that come through.

[1:51] If this function evaluates to true, it's going to go into repeat if, then go into done if. If that condition is true right here in this if, it's going to fire a done down to the repeat operator. If repeat receives a done, then it cancels and sets everything back up again.

[2:18] All of that logic of once it hits this condition and tearing down and making another fetch request and setting up the typing event listener and hooking everything back up together is all contained within this single operator.

[2:33] Then, from there, to log out the guess, this is just some JavaScript inside of React, mapping a letter or an asterisk and then you have a typing game, which will automatically fetch new words every time you enter the correct word.

Walkthrough the Data Flow of the Word Game

Share this video with your friends

Course

Implementing a Word Game with Patterns and React