If you have been part of the modern JavaScript community, it is likely you have run across a handy library called Immer. While I won’t go too far into detail about what Immer does, the gist is it allows you to mutate immutable objects and pass the changed objects back as a new immutable one. This certainly comes in handy when dealing with React state which works almost exclusively with immutable objects and expects new ones to be passed for state updates.
It is equally as likely you have run across a library called ReactN. ReactN is a simple and lightweight library for handling global state. It is non opinionated about how you setup your App state and comes with some handy hooks and reducers. It essentially replaces the need for using Redux while removing all the boilerplate.
These two libraries make quite a pair when used together to build React applications. We have been using them in nearly every JS project for some time now with much success.
A common use case we run across frequently is the desire to mutate the global state created by ReactN using a producer created by Immer. Even better we want changes to the global state to be passed down to our function components and still be mutatable via our producers. While this may be done with several lines of boilerplate, it quickly becomes cluttered and looks out of place when our components are sometimes only a few lines long.
Last spring I set out to do something about this. A couple days of hacking, testing, hacking, testing, profiling, and more testing, I came up with a solution! Taking the power of these two libraries, some creative TypeScript, and React hooks, I wrote a new hook and helper function. One line of code now replaces boilerplate and fits into modern, respected practices.
We have been using this new library ever since and love the way it works! In fact, we look for excuses to use it because it is so cool.
Today we decided to make this library available to the public, purely to let the rest of the community enjoy it along with us. ? You may find it here.
I’m also going to add the entire Readme to this post for historical purposes, as I know it will evolve over time. You may stop reading now unless you are interested in super nerdy content.
Use Immer ReactN
React hook and helper function for using Immer with ReactN.
Install
npm install reactnoryarn add use-immer-reactn
Usage
Assuming your global state set in ReactN looks like this:
useGlobalImmer
Works very similar to useGlobal in ReactN with the one different being you pass a function (producer) to the “setValue” call instead of a new value.
The passed function works exactly the same as a “producer” in Immer. Receiving the original value as it’s only parameter which may be mutated at will.
Simplified
setGlobalImmer
Works very similar to setGlobal in ReactN with two differences:
- An (optional) property may be specified to work with just that key instead of the entire global state.
- A function (producer) is passed instead of the new value.
Passing a property
The passed function works exactly the same as a “producer” in Immer. Receiving the original value of the specified key as it’s only parameter which may be mutated at will.
Simplified
Using entire global state
Simplified
TypeScript Support
Use Immer ReactN supports TypeScript out of the box! It is written entirely in TypeScript. This gives it powerful intellisense, auto-complete, and error-catching abilities.
While there is not configuration required to use this package, there is one caveat passed down from ReactN which requires you to setup a src/global.d.ts file to tell TypeScript the shape fo your global state.
If you are already using TypeScript with ReactN, odds are good you have already gone through the steps outlined here. If not, you’ll likely want to do so.