ngrx-immer

Immer wrappers around NgRx methods to simplify mutating state

• ngrx-immer
  • Installation
  • Functions
    • createImmerReducer (@ngrx/store)
    • immerOn (@ngrx/store)
    • ImmerComponentStore (@ngrx/component-store)
    • immerPatchState (@ngrx/signals)
    • immerReducer
  • FAQ
  • Resources

Installation

1npm install ngrx-immer

Do not forget to install immer

Functions

createImmerReducer (@ngrx/store)

Creates an NgRx reducer, but allows you to mutate state without having to use to spread operator.

• Use it when you want to go Immer all the way
• Caveat, you have to return the state with each on method

1import { createImmerReducer } from 'ngrx-immer/store';
2
3const todoReducer = createImmerReducer(
4	{ todos: [] },
5	on(newTodo, (state, action) => {
6		state.todos.push({ text: action.todo, completed: false });
7		return state;
8	}),
9	on(completeTodo, (state, action) => {
10		state.todos[action.index].completed = true;
11		return state;
12	}),
13);

immerOn (@ngrx/store)

Creates an NgRx reducer, but allows you to mutate state without having to use to spread operator.

• Use it when you want to go sprinkle a little bit of Immer for more complex cases

1import { immerOn } from 'ngrx-immer/store';
2
3const todoReducer = createReducer(
4	{ todos: [] },
5	on(newTodo, (state, action) => {
6		return {
7			...state,
8			todos: [...state.todos, action.todo],
9		};
10	}),
11	immerOn(completeTodo, (state, action) => {
12		state.todos[action.index].completed = true;
13	}),
14);

ImmerComponentStore (@ngrx/component-store)

Wraps Immer around the Component Store updater and setState methods.

1import { ImmerComponentStore } from 'ngrx-immer/component-store';
2
3@Injectable()
4export class MoviesStore extends ImmerComponentStore<MoviesState> {
5	constructor() {
6		super({ movies: [] });
7	}
8
9	readonly addMovie = this.updater((state, movie: Movie) => {
10		state.movies.push(movie);
11	});
12}

immerPatchState (@ngrx/signals)

[!IMPORTANT]
Because @ngrx/signals is in developer preview, the immerPatchState function is also in developer preview. It is ready to try, but may change before becoming stable.

Provides an Immer-version of the patchState function from the @ngrx/signals package. In addition to partial state objects and updaters that update the state immutably, it accepts updater functions that update the state in a mutable manner. Similar to patchState, the immerPatchState function can be used to update the state of both SignalStore and SignalState.

1const UserStore = signalStore(
2	withState({
3		user: { firstName: 'Konrad', lastName: 'Schultz' },
4		address: { city: 'Vienna', zip: '1010' },
5	}),
6	withMethods((store) => ({
7		setLastName(lastName: string): void {
8			immerPatchState(store, (state) => {
9				state.user.lastName = lastName;
10			});
11		},
12		setCity(city: string): void {
13			immerPatchState(store, (state) => {
14				state.address.city = city;
15			});
16		},
17	}))
18);

Please note, that the updater function can only mutate a change without returning it or return an immutable state without mutable change.

This one is going to throw a runtime error:

1// will throw because of both returning and mutable change
2immerPatchState(userStore, (state) => {
3	state.name.lastname = 'Sanders'; // mutable change
4	return state; // returning state
5});

immerReducer

Inspired by Alex Okrushko, immerReducer is a reducer method that uses the Immer produce method. This method is used by all the methods in ngrx-immer provides.

FAQ

• See the Immer docs, Update patterns, on how to mutate state

Resources

• Immer docs
• NgRx docs