Teaching how to use Redux by building it

Lately I’ve been giving a lot of ES2015, React and Redux training. I’ve realized that the best way to make my students learn Redux is by making them build their own version.

This is not a novel approach. There are many examples that have inspired me to teach this way. To name a few:

• Getting Started with Redux course at Egghead.io by Dan Abramov.
• Learning Observable By Building Observable by Ben Leash.
• Cycle.js Fundamentals course at Egghead.io by André Saltz (this one was recently update to fit this approach).

They all share the same basic “recipe”:

1. Define the most basic and fundamental subset of the library functionalities.
2. Use an example application to implement your own toy version covering the defined functionalities, ensuring that this version shares a common API with the real library. Code the solution step by step.
3. Once done, substitute your version with the real one and prove that the example app still works.

For example, in my latest React and Redux training session I did the following:

1. Define some actions and reducers and test them using the browser console.
2. Code a custom createStore.
3. Combine two reducers by hand.
4. Code a custom combineReducers function and refactor the code.
5. Create a example App with functional React components to define the UI.
6. Subscribe each component to the application store by hand.
7. Create a connect HOC and refactor all the connected components.
8. Create a Provider and make the connect HOC use the provided store.

You can see the result in this gist.

This exercise allowed me to teach my students several React and Redux concepts using modern JS: pure functions, immutability, the difference between class and functional components, the context API, the component lifecycle, High Order Components, etc.

To successfully apply this approach to teaching the most important part is to make the students active actors. Ask them how to code each part and let them discover the pros and cons of the solution.

You should try this approach the next time you have to teach how to use some technology. It’s worth the effort.