Disclaimer: You may or may not have improved your curry making skills by the end of this blog So you’re going to build the next-gen eCommerce company selling dog supplies and you’ve decided to use React to build it with coz, you know, its all the rage now and choosing a front-end framework is the “first and most important responsible step” towards building any successful online business. I’d like to share a neat trick I learned while building my own eCommerce website, obviously next-gen coz React! Filtering products based on various aspects is a staple in any shopping site and so let’s add some filters to the product results page. This is where our customers filter and find the right products for their dogs :) As any ‘good’ React developer would, let’s break up this UI into which is pretty straight forward in our case. components This is what React developers see when they visit any webpage :D Next, let’s identify the in our application. The only pieces of data that maybe considered as state here are the filter selections. The other data, the product list would likely be passed down as and are not mutated. state props is an object which contains the selected value for each of the filters in our page. filterSelections filterSelections = {price: ...,ages: ...,brands: ...,} Since the component is the common parent that contains the components that need (the and components), it would be the appropriate home for this to live in. Products filterSelections Filters ProductResults state The component, after receiving the as a prop, will pass down relevant filter values to each of its children. Filters filterSelections will also be passed down into the component so that the filters can be applied and only the relevant products are shown. filterSelections ProductResults These filters can’t be just static controls, we need to them to update as the customer adjusts the filters. filterSelections We’re passing down as to the filters and we know props are immutable in React. So where do we mutate then? The answer to that would be the component as its the owner of having it as its filterSelections props filterSelections Products filterSelections state. Let’s go ahead and add a bunch of change handler functions so that any changes to the filter selections are propagated up to the component where the actual mutation happens. Products Here’s the component. Products And the component. Filters This is pretty straightforward and would work. But we’ve got a bunch of functions in the component, all of which seem to be doing very similar things. Filters And if we add a new kind of filter in future, we’ll need to write yet another similar looking function in this component. Currying to the rescue This is where the trick comes in and it’s a popular & fancy sounding functional concept called programming currying. Before talking about currying, I’d like to show you how it can help clean up our component. Take a look for yourself — Neat right? Now the function is said to be For the functional programming aficionados out there, this is a pretty simple and straightforward concept. But for folks like me who’s always lived in the imperative & object oriented side of things, this was confusing to understand. So let’s unpack it. updatedSelections curried. You might have wondered when I said that the function has been curried, what the “uncurried” version of this function would look like. Here’s how — updatedSelections() If we were to use this instead of our curried version, we’d need to make each of the Filter component children call themselves and thus having to make them aware of the attribute name in that they need to update, which is too much coupling. updateSelections filterSelections The alternative is to use a dedicated function for each of the Filter components which leads to a mess like we saw already. Our solution is to this function. curry What’s currying? Currying is transforming a function into a function which takes part of the arguments that originally needed and would return another function which could take in rest of the arguments, returning the result of or could be curried itself. f f' f f Concretely, take this simple function, add add = (x, y) => x + y; when curried, it becomes — curriedAdd = (x) => {return (y) => {return x + y;}} So instead of calling we could call which returns a new function, which we could subsequently call with the other argument of , like and get the final result . add(1, 2) curriedAdd(1) add curriedAdd(1)(2) 3 Technically calling, is called “partial application”, as in, we’re applying only part of the arguments that the original function needed. curriedAdd(x) add(X, y) Currying a regular function let’s us perform partial application on it. This is a naive toy example which does not have much utility. Now if we go back to our original example — we can see how partial applications of the function — updateSelections updateSelections('ages');updateSelections('brands');updateSelections('price'); helped us clean up our component and reduce coupling. That’s currying :) Like all problems in software, this is not the only solution to this problem. Here’s an alternate solution — I hope you found this technique useful. If you’ve used currying in your / React project, do share snippets in the comments below and also your other comments and feedback are welcome ❤. JavaScript Are you looking to hire JavaScript, React or Ruby developers to work on your projects? Visit spritle.com to hire our kick-ass team that can bring your ideas to reality.
