Problèmes avec vos variables immutables ? Essayez Immer !

Aujourd'hui, le BlogDuWebdesign vous propose de découvrir Immer, un excellent moyen de gérer vos states immutables

Immer, le compagnon idéal du design Flux

Vous vous êtes mis à Redux (ou réact, ou Vuex, etc.) et vous avez quelques difficultées à gérer l'aspect imutable de votre state ? Immer est l'outil parfait pour ça !

Son fonctionnement est très simple : Immer vous permet de scoper votre vairiable pour récupérer un proxy, que vous pouvez ensuite modififer.

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

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

De cette manière, chaque modification sur votre state de base est faite en conscience de cause, bien distinctes de vos modifications "normales".

Pour vous donner un exemple, voilà à quoi ressemble un reducer reduc avec Immer.

const todo = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        id: action.id,
        text: action.text,
        completed: false
      }
    case 'TOGGLE_TODO':
      if (state.id !== action.id) {
        return state
      }

      return {
        ...state,
        completed: !state.completed
      }
    default:
      return state
  }
}

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        todo(undefined, action)
      ]
    case 'TOGGLE_TODO':
      return state.map(t =>
        todo(t, action)
      )
    default:
      return state
  }
}

En définitive, et bien qu'Immer n'est pas une ressource obligatoire, c'est un allier précieux dans tout vos projets utilisant flux.