The Redux, Reducers, and .reduce() puzzle
One of the most difficult subjects I wrestled with during my time in an immersive web dev bootcamp was that of Redux. I just could not get my head around it. It seemed like black magic. What was it doing behind the scenes? How did all of these pieces come together?
Maybe (definitely) this was because I didn’t have a good enough grasp of Javascript fundamentals. Maybe (definitely) this was because my brain was so overloaded with new information by the final weeks of the program that it was protesting and refusing to accept more. Or maybe (just maybe) it was a bit of semantics issue.
Redux and Flux
The Redux framework is based on the Flux framework which is used to manage data flow in an application. Flux’s selling point is that data flows in only one direction so that any changes in that data (the store) happen from one source (the dispatcher) and only happen one at a time. This prevents more than one action changing the same data at the same time and causing mass panic. These changes are then reflected in the view and the whole process can start over again with the next action.
Reducers
Redux introduces the concept of ‘reducers’ to this party. (Reducers + Flux = Redux) These reducers take the place of dispatchers. They take in the app’s current state and an action and produce the altered state based on the contents of the action.
Sounds pretty simple, right?
My brain seems to get tripped up on small things sometimes. And in this case I could not understand why these functions were called ‘reducers’. Looking at a typical reducer function, I see no reference to ‘reducing’. What are they reducing? Seems to me they are just combining two things into a third thing? Why not call them combiners? Or mergers? Or comminglers?
This bugged me until I came across this post which associates the reducers function with the .reduce() method. This method gets passed an iterator function that takes in two arguments. The first is an accumulator (state) and the second is what you want to add to the accumulator (action). Basically, combining two things into a third thing.
So the reducers in Redux are really just the same as the functions that get passed to the .reduce() method.
WHAT!?!
THAT’S WHY?!?
THAT’S IT?!?
I’m sure this fact was pointed out to me earlier and I missed it. Hey I never claimed to be all that bright. :) After getting over my embarrassment for being confused by this for so long, I carried on.
Okay, so now at least I know where the name came from. But it didn’t help so much with being any clearer on how they work. For that I would have to dive into the .reduce() function itself.
The .reduce() function
As with most questions about Javascript, I headed to the MDN site to get some reference. About 1/3 of the way down the page there is a nice, easy example of how .reduce() works. I’ve cleaned it up a bit, removing some arguments that aren’t being used.
[0, 1, 2, 3, 4].reduce((accumulator, currentValue) => {
return accumulator + currentValue;
});// 10
The .reduce() method takes in an argument of a callback function. This callback function takes in two arguments. The accumulator (in this case the sum), and the currentValue (in this case, the next number in the array).
first time through the function: accumulator = 0, currentValue = 0;
second time through the function: accumulator = 0, currentValue = 1;
third time through the function: accumulator = 1, currentValue = 2;
fourth time through the function: accumulator = 3, currentValue = 3;
last time through the function: accumulator = 6, currentValue = 4;
result = 10;
This is a pretty classic use case for reduce. Take an array of numbers and sum them up. But this example doesn’t show the the full potential of the method. Here is a slightly different example.
[0, 1, 2, 3, 4].reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 10);// 20
The callback function can take a second argument of an initial value which becomes the value of accumulator the first time through the function.
first time through the function: accumulator = 10, currentValue = 0;
etc.
AHA! Now this is really starting to look a lot like what the Redux reducers is doing. We have an initial value that we are passing in to a function that is then being combined with some additional data and producing a new value.
One more small thing about the .reduce() method (and this is a big selling point for Redux reducers as well) is that the function passed to it is a pure function. One more example.
The variable that is passed in to the iterator function does not get changed. Redux reducers act the same way. They do not mutate the data they are passed, they simply take in the data, combine it with an action, and produce a new result.
I still can’t say I have a complete grasp on all of the magic that Redux is doing yet, but (finally) seeing the connection between Redux reducers and the .reduce() function, I have a better understanding of how the whole thing comes together.
