This is a short anecddote about how I approached teaching things to someone else.
The coworker was struggling to understand the whole concept, so I tried to use a metaphor; I came with the idea of a Ferris wheel next to a lake, with someone in one of its basket holding a bucket, filling the basket with water from the lake everytime the basket is back to the ground.
Yeah, I know.
So as he was starring at me like I was a crazy person, and as I knew he did use React and Redux in the past, I told him it was like the reducer functions he probably used already.
We started writing a standard Redux reducer in plain js:
He was like “oh yeah, I know that”. Good! We could use that function iteratively:
So I could use the Ferris wheel metaphor again:
staterepresents the state of the wheel basket (and the quantity of water in it)
initis the initial state of the wheel basket (it contains no water yet)
actionsare the list of operations to proceed each time the basket reaches the ground again (here, filling the basket with water from the lake, sometimes emptying the basket)
For the records, yes my coworker was still very oddly looking at me.
We moved on and decided to reimplement the same thing in Elm, using
foldl. Its type signature is:
Wow, that looks complicated, especially when you’re new to Elm.
In Elm, type signatures separate each function arguments and the return value with an arrow (
->); so, let’s decompose the one for
(a -> b -> b), the first argument, means we want a function, taking two arguments typed
band returning a
b. That sounds a lot like our
ais an action, and
- the next argument, typed as
b, is the initial state we start reducing our list of actions from.
- the next argument,
List a, is our list of actions.
- And all this must return a
b, hence a new state. We have the exact definition of what we’re after.
Actually our own use of
foldl would have been much more obvious if we initially saw this, replacing
Note: if you’re still struggling with these
bs, you should probably read a little about Generic Types.
Our resulting minimalistic implementation was:
We quickly drafted this on Ellie. It’s not graphically impressive, but it works.
That was it, it was more obvious how to map things my coworker already knew to something new to him, while in fact it was actually exactly the same thing, expressed slightly differently from a syntax perspective.
We also expanded that the Elm Architecture and the traditional
update function was basically a projection of
Action being usually named Msg and
The funny thing being, Redux design itself was initially inspired by the Elm Architecture!
In conclusion, here are quick takeaways when facing something difficult to understand:
- start with finding a metaphor, even a silly one; that helps summarizing the problem, expressing your goal and ensure you get the big picture of it;
- slice the problem down to the smallest understandable chunks you can, then move to the next larger one when you’re done;
- always try to map what you’re trying to learn to things you’ve already learned; past experiences are good tools for that.