# Write Reducers for Different Data Types

InstructorPaul Frend

Published 7 years ago
Updated 6 years ago

Now that we understand the problem transducers can help us with, it's time to define what they actually are. A Transducer is a combination of two concepts, a transform, and a reducer. Trans-Ducer. In this lesson we'll give a general overview of the reducer part of the puzzle.

[00:01] A reducer is a simple function that takes an accumulation and a value, and then returns a new accumulation. Here we've got a simple example that takes an accumulation and a value, and then folds that value into the accumulation with an addition. We can call it like so. If I've got 10 as my accumulation, five as my value, I end up with 15 as the result.

[00:24] We can do the same thing with strings for instance, since they support addition. I can go "hello" as my accumulation, "Paul" as my value, and we can see our new accumulation is "hello Paul."

[00:37] Reducing is not necessarily coupled to iteration, although they almost always happen together. What I mean by that is you often think of a reduction as being called in an array. Let's say we have an array with five numbers in it. Now we can call a reduce on this array. We pass in our reducer and our initial value. We see we get 15 as our result.

[01:03] It's important to understand that the reducer is the argument that we pass to the reduce method. The actual reduce method on the array prototype is not a reducer in itself. It's just a method that abstracts away the iteration part and feeds these values into your reducer.

[01:21] What I mean by that is we could be reducing manually here. If we save this value, then we can reduce over it again. That's really all that reduce does. It just keeps taking these values and feeding them into your reducer function.

[01:37] Our reducer functions could work with pretty much anything, as well. To show that, let's add a reducer that adds keys to an object. I'm going to call that object Reducer. That's going to take an accumulation and an object as the value. Then it's going to return an object that spreads the accumulation and the object. This is going to add in any keys from this object into this accumulator.

[02:06] Let's create a user object with a name Key and an email. Then we can call our object reducer with our user object as the accumulator and another object as a value. We forgot a dot. Now we can see we get a new object back with this nickname Key folded into this larger object.

[02:33] Let's do one more example with a reducer that works with sets. Let's call this set Reducer, which will take an accumulation and a value, just like before. This is going to return our accumulation with the value added into it. On a set, that operation's called add. We'll just add in the value. This is going to return the accumulation with that value added in.

[02:57] To use it, let's create a set called mySet, and let's just create this set from an array of values. Then we can reduce over our set. I'll pass in mySet, add the value five, and we get a set back with five added in. Since sets only have distinct values, if we were to add four here instead, we don't get two fours in our result.

[03:21] In short, our reducers are just simple function that take an accumulation and a value and return a new accumulation. The return type of the accumulation must match the type that you pass in. With that in mind, it's really the function bodies of these reducers that couple us to the types of collections and values we can work with.

Timothy
~ 7 years ago

an aside: Those inline /?/ logging things are cool. Is that a webstorm thing? Hmm wonder if I could implement that in sublime text?

Paul Binns
~ 7 years ago

What are you doing to automatically get the logging annotation in quokka? As in `/*?*/`

Paul Frendinstructor
~ 7 years ago

@timothy it's a plugin called quokka, but also has editor support for vs code and atom. It's pretty awesome for explorative coding and getting super fast feedback loops https://quokkajs.com/

Paul Frendinstructor
~ 7 years ago

@paul I've just got a webstorm live template for it with the string `qc` which expands on tab press

`write qc, press tab -> /*?*/`

If it appears more automatic than that it's probably due to the magic of editing :).

However, I've also recorded a macro which goes to end of line, writes qc and presses tab which works really well, but didn't use that in the videos.

Yvon
~ 5 years ago

Hi Paul, with quokka i have the error bellow ​​​​Quokka 'Untitled-3.js' (node: v9.3.0, babel: v6.26.3, plugins: jsdom-quokka-plugin)​​​​ SyntaxError: quokka.js: Unexpected token (60:8)  58 | const objReducer = (acc, obj) => {  59 | return {

60 | ...acc,  | ^  61 | ...obj,  62 | }  63 | }  any idea?

Paul Frendinstructor
~ 5 years ago

Hi @Yvon, It's a bit hard to see the code snippet above, but my guess is that's due to babel not knowing how to handle the spread operator. Since you're using babel 6, you prob have to add this plugin: https://www.npmjs.com/package/babel-plugin-transform-object-rest-spread. You could also try using babel@7 instead, which supports this syntax by default I believe (with something like https://babeljs.io/docs/en/babel-preset-env )

Yvon
~ 5 years ago

Hi Paul, thanks a lot for the answer. I had to use babel@7. Great course by the way.

Tre' Codez
~ 4 years ago

Is that WallabyJS in your IDE?! :)

Markdown supported.
Become a member to join the discussionEnroll Today