Immer

Immer

  • Documentation
  • GitHub
  • Support Immer

›Basics

Basics

  • Introduction
  • Installation
  • Using produce
  • Curried producers
  • Example Reducer
  • React setState example

Advanced Features

  • API overview
  • TypeScript / Flow
  • Returning new data from producers
  • Patches
  • Auto freezing
  • Original
  • Async produce / createDraft
  • Working with Map, Set and classes

Resources

  • Immer performance
  • External resources
  • FAQ
  • Pitfalls
  • Built with Immer
  • Supporting immer
Edit

Introduction to Immer

Immer

Winner of the "Breakthrough of the year" React open source award and "Most impactful contribution" JavaScript open source award in 2019.

  • Introduction blogpost: Immer: Immutability the easy way
  • Short Egghead.io lesson covering the Immer essentials: Simplify creating immutable data trees with Immer (7m)
  • Free in-depth Egghead.io course: Immutable JavaScript Data Structures with Immer (58m)

Immer (German for: always) is a tiny package that allows you to work with immutable state in a more convenient way. It is based on the copy-on-write mechanism.

The basic idea is that you will apply all your changes to a temporary draftState, which is a proxy of the currentState. Once all your mutations are completed, Immer will produce the nextState based on the mutations to the draft state. This means that you can interact with your data by simply modifying it while keeping all the benefits of immutable data.

immer-hd.png

Using Immer is like having a personal assistant; he takes a letter (the current state) and gives you a copy (draft) to jot changes onto. Once you are done, the assistant will take your draft and produce the real immutable, final letter for you (the next state).

Quick Example

import produce from "immer"

const baseState = [
    {
        todo: "Learn typescript",
        done: true
    },
    {
        todo: "Try immer",
        done: false
    }
]

const nextState = produce(baseState, draftState => {
    draftState.push({todo: "Tweet about it"})
    draftState[1].done = true
})

The interesting thing about Immer is that the baseState will be untouched, but the nextState will be a new immutable tree that reflects all changes made to draftState (and structurally sharing the things that weren't changed).

Head to the next section to further dive into produce.

Benefits

  • Immutability with normal JavaScript objects, arrays, Sets and Maps. No new APIs to learn!
  • Strongly typed, no string based paths selectors etc.
  • Structural sharing out of the box
  • Object freezing out of the box
  • Deep updates are a breeze
  • Boilerplate reduction. Less noise, more concise code.
  • First class support for patches
  • Small size
Installation →
  • Quick Example
  • Benefits
Copyright © 2019 Michel Weststrate