Tutoriel Immer & JavaScript : Immer

Dans cette vidéo je vous propose de découvrir Immer. Cette librairie va vous permettre de créer des fonctions immutables en utilisant les fonctions mutables du JavaScript.

Le problème

Lorsque l'on souhaite travailler avec des fonctions pures on se retrouve parfois avec des fonctions plus complexes que nécessaire.

function toggleTodo (state, index) {
  if (index >= state.todos.length) {
    return state
  }
  return {
    ...state,
    todos: state.todos.map((todo, i) =>
      i === index
        ? {
            ...todo,
            completed: !todo.completed
          }
        : todo
    )
  }
}

Le JavaScript n'est pas forcément pensé avec l'immutabilité comme concept principal et il est souvent beaucoup plus aisé d'écrire le même code de manière mutable.

function toggleTodo (state, index) {
  state.todos[index].completed = !state.todos[index].completed
  return state
}

Immer à la rescousse

Immer va permettre de travailler avec les mutations tout en gardant les fonctions immutables. Pour cela, il se repose sur un système de Proxy qui va agir comme un intermédiaire vers l'objet original.

import { produce } from 'immer'

function toggleTodo (state, index) {
  return produce(state, function (draft) {
    draft.todos[index].completed = !draft.todos[index].completed
  })
}

Cette fonction utilise le principe de curryfication et retournera une fonction si on ne l'appelle qu'avec un seul argument.

import { produce } from 'immer'

const toggleTodo = produce(function (draft, index) {
    draft.todos[index].completed = !draft.todos[index].completed
})

Pour en apprendre plus n'hésitez pas à faire un tour sur la documentation