Use Immer ReactN

React hook and helper function for using Immer with ReactN.

Install

• npm install use-immer-reactn or
• yarn add use-immer-reactn

Usage

Assuming your global state set in ReactN looks like this:

1{
2	title: {
3		en: 'Hello World'
4	}
5}

---

useGlobalImmer

Works like 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 the same as a "producer" in Immer. Receiving the original value as it's only parameter, which may be mutated at will.

If the current component is nested below a custom provider, the hook will automatically use the custom provider.

1import {useGlobalImmer} from 'use-immer-reactn';
2
3const TestComponent = () => {
4	const [ title, setTitle ] = useGlobalImmer( 'title' );
5
6	const changeTitleProducer = ( originalTitle ) => {
7		originalTitle.en += ' Changed';
8	};
9
10	return (
11		<>
12			<h1>{title.en}</h1>
13			<button onClick={() => setTitle( changeTitleProducer )}/>
14		</>
15	);
16};
17export default TestComponent;

Simplified

1export default () => {
2	const [ title, setTitle ] = useGlobalImmer( 'title' );
3	return (
4		<>
5			<h1>{title.en}</h1>
6			<button onClick={() => setTitle( draft => {
7				draft.en += ' Changed';
8			} )}/>
9		</>
10	);
11};

You may omit the property when calling useGlobalImmer to work with the entire state object.

1export default () => {
2	const [ state, setState] = useGlobalImmer();
3	return (
4		<>
5			<h1>{state.title.en}</h1>
6			<button onClick={() => setTitle( draft => {
7				draft.title.en += ' Changed';
8			} )}/>
9		</>
10	);
11};

You may also pass a finished object instead of a callback to the updater function. This allows to externally finish an object and or mutate a draft from the same useGlobalImmer updater interchangeably.

1export default () => {
2	const [ title, setTitle ] = useGlobalImmer( 'title' );
3	return (
4		<>
5			<h1>{title.en}</h1>
6        {/** Using a finished object **/}
7			<button
8				onClick={() => setTitle( {
9                    en : 'changed'
10                })} />
11        {/** Using a draft mutator callback **/}
12			<button
13				onClick={() => setTitle( draft => {
14					draft.en += ' Changed';
15				} )} />
16		</>
17	);
18};

---

setGlobalImmer

Works very similar to setGlobal in ReactN with two differences:

1. An (optional) property may be specified to work with just that key instead of the entire global state.
2. 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.

1import {setGlobalImmer} from 'use-immer-reactn';
2const changeTitleProducer = ( originalTitle ) => {
3    originalTitle.en += ' Changed';
4};
5setGlobalImmer( 'title', changeTitleProducer );

Simplified

1setGlobalImmer( 'title', originalTitle => {
2    originalTitle.en += ' Changed';
3} )

Using entire global state

The passed function works exactly the same as a "producer" in Immer. Receiving the entire state (the same way setGlobal in ReactN does) as it's only parameter which may be mutated at will.

1import {setGlobalImmer} from 'use-immer-reactn';
2const changeTitleProducer = ( original ) => {
3    original.title.en += ' Changed';
4};
5setGlobalImmer( changeTitleProducer );

Simplified

1setGlobalImmer( 'title', original => {
2    original.title.en += ' Changed';
3} )

useGlobalImmerProvider

Use when working with a custom provider created by createProvider from a component not nested below the provider.

@notice If the current component is nested before the provider, use instead useGlobalImmer.

1type CustomState = {
2	loading: boolean;
3}
4const provider = createProvider<CustomState>( {} );
5
6export default () => {
7	const [ title, setTitle ] = useGlobalImmerProvider<CustomState, 'title'>( provider, 'title' );
8	return (
9		<>
10			<h1>{title.en}</h1>
11			<button onClick={() => setTitle( draft => {
12				draft.en += ' Changed';
13			} )}/>
14		</>
15	);
16};
17

setGlobalImmerProvider

Use when working with a custom provider created by createProvider.

Works very similar to setGlobalImmer except it accepts a Provider as the first argument.

1import {createProvider} from 'reactn';
2import {setGlobalImmerProvider} from 'use-immer-reactn';
3
4export const Provider = createProvider( {
5	title: {
6		en: 'Hello World'
7	}
8} )
9
10const changeTitleProducer = originalTitle => {
11	originalTitle.en += ' Changed';
12};
13setGlobalImmerProvider( Provider, 'title', changeTitleProducer );

Simplified

1setGlobalImmerProvider( Provider, 'title', title => {
2    title.en += ' Changed';
3} )

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 no 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 of 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.