Javascript: More on Pure & Reducer function, and unit testing!

In my previous article I talked about pure functions and reducer function from Redux. From what I’ve learned so far from functional programming, operations or functions are chopped down to the most basic function then composed to become a function that will operate on a data structure. Let’s explore it a bit more!

This is a slightly modified object from the last article.

okay.. it’s a different object.

And this will be the functions that will add to the `favoriteFood` list

hhhmm.. whaa??

So.. the addFood function looks a bit over done but! hear me out. I know its a lot of code but its not really complicated and it will simplify the entire program. The weird annotation, yeahh.. I’ve been learning Haskell so I’ve been using Haskell’s type annotation to comment my javascript. lol! Don’t worry it’s also not complicated, at least not in my example.

Let me breakdown the `addFood()` function.

I mentioned ramda, I use it in favor of other libraries like Underscore.js or Lodash because it makes currying and composition work smoothly, most functions in ramda are right associative; meaning operations proceed from right to left.

Here’s an example of reversing a string showing right associative composition: (If you understand right associative functions skip the gist below).

That was a long segue! I apologize, after I started learning function composition I’ve been crazy about it; I use it everywhere in my code.

The reducer function is also one way to compose functions! Currently, our reducer function has the ability to ‘ADD_FOOD’ to each developer object. Let’s add their favorite ice cream flavor!

wasabi?!

I extracted `favoriteFood()` from `addFood()` and turned it to `addProps()` because it was a function that can be used for both `iceCreamFlavor()` and `addFood()` functions.

Here’s all the functions so far:

😍😍😍😍

Do you see how smoothly all the functions come together in the reducer function?! I think it’s safe to say that they are “composed” nicely together!

Let’s test it!

I’m using mocha testing suite and chai assertion library to test my `reducer()`. I imported the `reducer()` into my test environment and passed in the `initialState`, and I passed the actions in each test blocks. I then assert the result of those actions with expect. As you can see, I only have to worry about the `initialState` and the result of my action I didn’t have to worry about the resulting value of the previous operations. This is what I like about pure functions, it’s only concerned about the input and after that I can assume that it will return a value or the result of the operation without affecting anything outside the function. Before using pure functions, I would run my program, cross my fingers(arms & and legs), and hope that there are no unexpected changes. There was so much magic in my program before pure functions.


Voila! The result of my test:

[mic drop…]
No state was harmed in this article.

I just want to iterate that I’m not an expert in this subject, I’m merely stating the benefits of what I learned. I hope it was coherent enough for anybody reading this. If you want to know more, check out Eric Elliot!