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.
npm install reactnor
yarn add use-immer-reactn
Assuming your global state set in ReactN looks like this:
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.
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.
Using entire global state
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.