Teaching Redux with a todo list produces blank faces: nobody can feel why a todo needs a reducer. Redux is a JavaScript library that keeps an application’s whole state in one object and changes it only by running one function, the reducer, over a log of actions. Tic-tac-toe is nine cells, two players, one rule for “has someone won” and an obvious history, and it fits on a whiteboard. tic-tac-toe-redux-dojo is a workshop built on that game, where every step is a git commit and the finale is watching a finished game replay itself backwards, one move at a time.
This post covers how the one-commit-per-step format runs in a room, the four stages the code moves through, and the moment where Redux stops feeling like ceremony.
Every step of the workshop is a git commit
Each stage of the workshop is a commit. Participants clone the repository, reset their working copy to the first commit (git reset --hard to step zero), and move forward through the commits at their own pace. The facilitator’s notes and hints live in the commit messages, so the same repo works as a live session or as homework.
- A React component with the board state hard-coded inside it. It renders a board and nothing else.
- Actions and a reducer. The component shrinks, because the rules of the game move out of it and into the reducer.
- A store and
connect(), the Redux helper that hands state to a React component. This is the step with the most boilerplate, and the step where the group talks about why the boilerplate exists. - The Redux DevTools browser extension. Play a game, then drag the extension’s history slider back to the empty board.
The step where it clicks
Step four is the point of the exercise. Reducers with no side effects, updates that never modify existing state, and a log of every action are abstractions until you watch the board un-play itself. The game gives every one of those ideas a visible consequence: “did I win?” is a function of the current state, the history is the action log, and undo comes for free because no reducer ever modified anything in place.
Run it
If you are planning a Redux onboarding session, fork it — pull requests welcome.