JavaScript Scene
Published in

JavaScript Scene

One Cool Trick to Simplify Reducer Functions

Redux is an amazing tool if you take the time to get to know it. One of the things about Redux that commonly trips people up is that reducers must be pure functions.

A pure function is a function which:

  1. Given same arguments, always returns the same result, and
  2. Has no side-effects (e.g., it won’t mutate its input arguments).

The problem is that sometimes a reducer needs to make a complicated change to some input state, but you can’t just mutate the state argument without causing bugs.

The solution is a handy tool called Immer. In this video, I’ll introduce you to Immer and show you how to use it to reduce the complexity of your reducer code. With one or two small reducers, the difference is pretty subtle, but on a large project, it can significantly simplify your application code.

Here’s an example. Imagine you’re building a social network, and you need to keep track of posts that a user has liked. When they like a post, you add a like object to the user’s likes collection. That might look something like this:

Notice what we’re returning from the like.type case: Mixing bits of the payload into a nested property of the state object using the JavaScript object spread syntax: ...state and ...state.likes on lines 19–25.

After immer, you can simplify that part to a one-liner (line 21):

The produce function returns a partial application (a function which has been partially applied to its arguments) which then takes the arguments of the reducer function. You pass it a callback function which takes a draft of the state object instead of the real state object. You’re free to mutate that object as if it were any other mutable object in JavaScript. No more spreading nested properties to avoid mutating the input argument.

After your callback function runs, Immer compares the draft to the original state and then builds a new object with your changes applied, so your function feels like it’s mutating, but still behaves like a pure function. You get the best of both worlds: The simplicity of mutation with the benefits of immutability.

Next Steps

EricElliottJS.com has in-depth lessons on topics like pure functions, immutability, partial applications, and other functional and object oriented programming concepts.

Subscribe on YouTube.

Eric Elliott is a tech product and platform advisor, author of “Composing Software”, cofounder of EricElliottJS.com and DevAnywhere.io, and dev team mentor. He has contributed to software experiences for Adobe Systems, Zumba Fitness, The Wall Street Journal, ESPN, BBC, and top recording artists including Usher, Frank Ocean, Metallica, and many more.

He enjoys a remote lifestyle with the most beautiful woman in the world.

--

--

--

JavaScript, software leadership, software development, and related technologies.

Recommended from Medium

«WARNING: sanitizing HTML stripped some content» and how to deal with it properly

Meme with wordplay on fire-purifier

JavaScript 10 important questions

What makes a good Angular library

The Junior Developer Journey (25 Apr 2022)

How the balance tipped in favor of React Native

Selectors-Actions-Hooks architecture with Redux Toolkit

10 Frameworks that are topping the charts for Hybrid Mobile App development

Passing URL Parameters with the Angular HTTP Client

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Eric Elliott

Eric Elliott

Make some magic. #JavaScript

More from Medium

The Most Important Assertions in Jest, React Testing Library Tests

Compound Component Design Pattern in React

Need for JSX in React — Explained with Examples

Reduce your React Applications Bundle Size by 75% with Compression