Redux Quidditch! (Learn Redux the Fun Way — Some Blindfolds Required)

Let’s be real: the problem with Redux isn’t quite that it’s like learning a new language; it’s the logic it follows. Learning it can be a pain, but it does make using frameworks like React way easier, so it’s great to have under your belt.

Good news is, I came up with a physical, fun game you can play with a group of dorks (they don’t even have to be programmers) that makes it easy to learn!

So this is what we’ll cover:
1. Props in React, and how Redux saves the day (skip if you’re good here)
2. How to play Redux Quidditch
3. How this game mirrors real Redux dynamics that developers need to take into account all the time

Props in React

Remember that React passes ‘props’ through ‘components.’

Wha?

Components are the Lego pieces of your webpage.

Here’s a component…

import React, { Component } from 'react';
import ThingsILike from './ThingsILike';
export default class HomePage extends Component {
render () {
return (
<div>
Welcome to my homepage! Some things I like:
<ThingsILike />
</div>
);
}
}

…and here’s another component…

import React from 'react';const ThingsILike = () => {
return (
<ul>
<li>Great-smelling hair</li>
<li>The sound of rain when I'm not a target</li>
</ul>
);
};
export default ThingsILike;

Hey! Did you notice one is inside the other?

Apart from making editing <HomePage /> easier and prettier by having the<ThingsILike /> component stash our list for us, React is great in that you can pass stuff in (called props) to ‘inner’ components, from the outer one!

Betcha didn’t see my new homepage…

import React, { Component } from 'react';export default class HomePage extends Component {
const bieber = `Being a belieber`;
render () {
return (
<div>
Welcome to my homepage! Some things I like:
<ThingsILike guiltyPleasure={bieber} />
</div>
);
}
}
const ThingsILike = (props) => {
const guiltyPleasure = props.guiltyPleasure;
return (
<ul>
<li>Great-smelling hair</li>
<li>The sound of rain when I'm not a target</li>
<li>{guiltyPleasure}</li>
</ul>
);
};

But using a component for one thing usually makes no sense. More realistically, this

class Homepage extends Component {
const guiltyPleasures = [{
id: 0, item: `Watching people fall` }, {
id: 1, item: `Bad paint jobs` }, {
id: 2, item: `Aunt Maizy's newest outfits` }
];

render () {
return (
<div>
Welcome to my homepage! Some things I like:
<ThingsILike guiltyPleasures={guiltyPleasures} />
</div>
);
}
}

…would be placed into this, like so:

const ThingsILike = (props) => {
const guiltyPleasures = props.guiltyPleasures;
return (
<ul>
<li>Great-smelling hair</li>
<li>The sound of rain when I'm not a target</li>
{guiltyPleasures.map(guiltyPleasure => {
return (
<li key={guiltyPleasure.id}>{guiltyPleasure.item}</li>
);
})}

</ul>
);
};

BUT WAIT!

What if we want to put those props into another component that’s not in direct lineage, the way <HomePage /> and <ThingsILike /> are?

That’s where Redux comes in.

The point of Redux is to manage all of your state in one place. As React developers, we care because Redux lets your components access the prop-goodies via a cloud-like thing called state, regardless of whether the component is in an aristocratic dynasty of props. (React without Redux also has states, but each optional state lives in each component and can only travel from there. Ugh!)

And those Redux benefits are so great! No more remembering which components have which props oozing through them! Props for all!!

But the Redux journey from request to render is fairly complicated.

(Component wants something → triggers map-dispatch function → triggers Thunk which requests from server and sends present to Reducer → Reducer tells State what to do→ State → renders back in component. What?)

This fun game will make it HARD TO FORGET what each part does and needs, and builds good habitual expectations engineers should have regarding how careful they should be when cooking something up with Redux!

REDUX QUIDDITCH (THE REDUX GAME)

OBJECTIVE: Send along the request through your whole team before the other team does!

WHO: 2+ teams, each team 6+ players, plus 1 Referee-quester

WHERE: Pass-the-baton kind of ‘lane’. Get the chairs out of the way!

TEAM ROLES:
- 1 Seeker (aka the user who makes a request)
- 2+ MDs (map-dispatch functions)
- 1 Thunker (please call it “Thunk” in the real world)
- 1 Reducer
- 1 Stately Statesperson

TL;DR Steps (expounded on after these 4 points, PLEASE READ THAT):

  1. Referee-quester announces the 2+ possible secret requests
  2. Box aka the Server Zone is set up with respective objects (actions!) per possible request (actions don’t come from the server; this is basically a sandbox for the Thunker to deal with making a server request and selecting an action to dispatch)
  3. Each teammate tells their neighbor how they’ll indicate which request is the correct one
  4. The referee-quester whispers the request to the Seekers, and the race begins!

START OF GAME:
0. Arrange yourselves like so; the red lines indicate where Seeker and Reducer cannot pass (or else it’s too easy for tagging to happen):

1. Referee-quester announces to all what the 2(+) possible requests are, e.g. “PURPLE MARSHMALLOW or SURPRISING FLAMINGO.” Number of possible requests must be equal to the number of MDs on each team!

2. A box, aka the SERVER ZONE, is set in the middle of the room for the Thunkers to access. It has a handful of objects representing actions, depending on the number of possible requests. So e.g. a few chargers and a few hats for two possible requests. Put bags there, too, for Thunkers to stuff the action-objects in to then hand to Reducer!

The shot-in-the-air “go!” happens later when the Referee-quester whispers which request is THE OFFICIAL REQUEST to the Seekers. So, here comes the part of the setup where each teammate tells their Redux-neighbor which secret object/action/gesture refers to which request! (At this point nobody knows which potential request is The Request:)

The Four Pre-Game Communications:

1. Seeker whispers to their MDs who is which: “Tammy, if I call you it’s Purple Marshmallow, and Rick, if I call you it’s Surprising Flamingo.”

2. MDs whisper to their Thunker which MD is which thing, based on what Seeker decided. (Tammy: “If I run to Seeker and then you, it’s Purple Marshmallow.” Rick: “And if I’m the one running to Seeker and then you, it’s Surprising Flamingo.” Thunker: “I see the resemblance.”)

3. Thunker tells to-be-blindfolded Reducer which action-object represents which request. (“If you feel a screwdriver in the bag, it means the request is Purple Marshmallow; if you feel a Laffy Taffy it’s Surprising Flamingo.”)

4. The Reducer tells their Stately Statesperson which Stately Gesturethey will make to represent which request (“if I start regally smoking an invisible cigar it’s Purple Marshmallow; if I open imaginary curtains grandly it means Surprising Flamingo”). The Stately Statesperson should get some practice doing these gestures since they will be doing them on render-center stage when they announce the request their team processed! And the Reducer too since they will be blindfolded.

After these are communicated, the teammates hereby CANNOT REMIND each other which is which, and we’re READY…TO…START!!

READY, SET, GAME ON!:

I STRONGLY recommend walking through these steps on your feet with people, versus just reading them, even if you’re by yourself. Muscle memory!

1. Each Reducer gets blindfolded.

2. The referee-quester whispers *THE REQUEST* to Seekers in plain language. (“Psst, it’s……Surprising Flamingo.”) It has begun.

So, on each team:

3. Seeker, without saying the request, calls out the (hopefully) correct MD’s name to indicate the request, who in turn takes off to tag Seeker. Seeker must stay with their feet in place! After MD tags Seeker, the MD runs back to their place to tag (and thus toggle) Thunker.

4. When the Seeker called MD, Thunker was thinking “Okay, the Seeker called Tammy, so that means the request is…is…..Purple Flamingo!” Thunker’s feet are also cemented in place, and when MD makes it back to tag Thunker, Thunker is free to be the first Thunker to get into the SERVER ZONE (the box) to get the right action for the request they think it is.

  • Only ONE Thunker can be in the SERVER ZONE at a time because the server can handle only one request at a time! When the first Thunker is in, the other Thunker has to wait for the first Thunker to pick the right object, which can be arduously suspenseful and silly. Clean-language jeering is great fun during this part! “Whatcha gonna do Thunker! Heeere Thunker Thunker Thunker!!”

5. Thunker grabs the correct action-object, puts it in a bag, and runs to hand it to their blindfolded Reducer.

6. Blindfolded Reducer, having retrieved the object from Thunker, fumbles it out of the bag, figures out which object it is by touch, turns in place towards the Stately Statesperson, and makes the hopefully correct stately gesture to the Stately Statesperson. (Reducers can’t accept unwrapped actions or team instantly loses! In that case Reducer must throw error by saying “ERROR THROWN.”)

7. The Statesly Statesperson sees Reducer’s theatrical gesture, says “oh that’s…Surprising Flamingo I’m pretty sure,” rushes to ‘render-center stage’ and shouts “RENDERRRR!” to call for attention. When a Statesly Statesperson hits render-center, ALL players must freeze and turn to look at the Statesly Statesperson. Only ONE Statesly Statesperson can be in render-center at a time. All is silent during this make-or-break moment. The Statesly Statesperson must 1) grandly, slowly make the gesture that Reducer made, 2) and say at the same time (these exact words or instant-lose):

“I … the Statesly Statesperson … hereby announce … that I have been endowed … with [HOPEFULLY CORRECT REQUEST]!”

After hearing something was rendered, if correct, the referee-quester exclaims “There’s my [request]!”, or “ERROR THROOOWN!” and everyone starts again. The Referee-quester whispers another (or the same) request to the Seekers and it begins again.

If both sides keep messing up, someone can shout “DEBUGGER!” which gives 30 seconds to each team to go through the communication steps again, whispering.

And that’s how you play!

How is Redux Quidditch just like Redux?

Redux Quidditch mirrors aspects of Redux that are wonderful and annoying.

Dynamics

  1. You can’t be missing any of the parts.
  2. Each part depends directly on the success of its predecessor.
  3. Each part essentially has ONE JOB. During the game it can be astonishing when a teammate with ONE JOB messes up, but we as developers mess up all the time when we allocate ONE JOBs to different parts of our program!
  4. Just because the state got the wrong thing, doesn’t mean it’s the reducer’s fault, or even the state’s. You have to trace from the request-origin and see where you went wrong! Did the Seeker confuse one MD with the other? Is the Thunker implementing the wrong action?

Functionality

  1. In real life, the developer sets up and calls the Map-to-Dispatch function which in turn dispatches the Thunk, just like the Seeker needs to call the correct MD to then trigger the ‘Thunker.’
  2. The Thunk middleware makes an Axios request to the server, gets something, and wraps it in hopefully the correct action-object, just like the Thunker in our game grabs hopefully the right object, depending on the request, and wraps it in a bag.
  3. The reducer checks what type the action has, and based on that, modifies the state. In the Redux Game, the blindfolded Reducer is basing their state-modification decision based solely on what they find inside the bag, and not from any activity that came before. They then communicate to the state, and the rest is history!

I hope you have fun getting the essentials of Redux in this on-your-feet style. You’ll never forget what Thunk middleware or a reducer is supposed to do again. Developers know muscle memory is key for learning new frameworks, but it’s not just for typing! Slack this page to your team and see who’s down to give it a whirl. Game on!

software engineer featured on medium and noteworthy

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store