JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 16996
  • Score
    100M100P100Q147225F
  • License MIT

Immer wrappers around NgRx methods createReducer, on, and ComponentStore

Package Exports

  • ngrx-immer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngrx-immer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ngrx-immer

Immer wrappers around NgRx methods to mutate state easily

Installation

npm install ngrx-immer

Resources

createImmerReducer

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
import { createImmerReducer } from 'ngrx-immer/store';

const todoReducer = createImmerReducer(
    { todos: [] },
    on(newTodo, (state, action) => {
        state.todos.push({ text: action.todo, completed: false });
        return state;
    }),
    on(completeTodo, (state, action) => {
        state.todos[action.index].completed = true;
        return state;
    }),
);

immerOn

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
import { immerOn } from 'ngrx-immer/store';

const todoReducer = createReducer(
    { todos: [] },
    on(newTodo, (state, action) => {
        return {
            ...state,
            todos: [...state.todos, action.todo],
        };
    }),
    immerOn(completeTodo, (state, action) => {
        state.todos[action.index].completed = true;
    }),
);

ImmerComponentStore

Wraps Immer around the Component Store updater and setState methods.

import { ImmerComponentStore } from 'ngrx-immer/component-store';

@Injectable()
export class MoviesStore extends ImmerComponentStore<MoviesState> {
    constructor() {
        super({ movies: [] });
    }

    readonly addMovie = this.updater((state, movie: Movie) => {
        state.movies.push(movie);
    });
}

immerReducer

immerReducer is a reducer method by using the Immer produce method. This method is used by the methods in this library, this idea was inspired by Alex Okrushko.

Migrating from ngrx-etc to ngrx-immer

You can execute the following script in your project, this script replaces everything from ngrx-etc to the ngrx-immer equivalent.

npx https://gist.github.com/timdeschryver/efdded8b72bd36ac0a2bc719eca1f161

Don't forget to install ngrx-immer and immer after running the above script.

Old (ngrx-etc) New (ngrx-immer)
mutableOn immerOn
createMutableReducer createImmerReducer
ImmerComponentStore
immerReducer