Immer
On this page
Basic example
TBC
useImmer
TBC
Update patterns
immerjs.github.io/imme...terns
Object mutations
js
import produce from 'immer'const todosObj = {id1: { done: false, body: 'Take out the trash' },id2: { done: false, body: 'Check Email' },}// addconst addedTodosObj = produce(todosObj, (draft) => {draft['id3'] = { done: false, body: 'Buy bananas' }})// deleteconst deletedTodosObj = produce(todosObj, (draft) => {delete draft['id1']})// updateconst updatedTodosObj = produce(todosObj, (draft) => {draft['id1'].done = true})
Array mutations
js
import produce from 'immer'const todosArray = [{ id: 'id1', done: false, body: 'Take out the trash' },{ id: 'id2', done: false, body: 'Check Email' },]// addconst addedTodosArray = produce(todosArray, (draft) => {draft.push({ id: 'id3', done: false, body: 'Buy bananas' })})// delete by indexconst deletedTodosArray = produce(todosArray, (draft) => {draft.splice(3 /*the index */, 1)})// update by indexconst updatedTodosArray = produce(todosArray, (draft) => {draft[3].done = true})// insert at indexconst updatedTodosArray = produce(todosArray, (draft) => {draft.splice(3, 0, { id: 'id3', done: false, body: 'Buy bananas' })})// remove last itemconst updatedTodosArray = produce(todosArray, (draft) => {draft.pop()})// remove first itemconst updatedTodosArray = produce(todosArray, (draft) => {draft.shift()})// add item at the beginning of the arrayconst addedTodosArray = produce(todosArray, (draft) => {draft.unshift({ id: 'id3', done: false, body: 'Buy bananas' })})// delete by idconst deletedTodosArray = produce(todosArray, (draft) => {const index = draft.findIndex((todo) => todo.id === 'id1')if (index !== -1) draft.splice(index, 1)})// update by idconst updatedTodosArray = produce(todosArray, (draft) => {const index = draft.findIndex((todo) => todo.id === 'id1')if (index !== -1) draft[index].done = true})// filtering itemsconst updatedTodosArray = produce(todosArray, (draft) => {// creating a new state is simpler in this example// (note that we don't need produce in this case,// but as shown below, if the filter is not on the top// level produce is still pretty useful)return draft.filter((todo) => todo.done)})
Nested data structures
js
import produce from 'immer'// example complex data structureconst store = {users: new Map([['17',{name: 'Michel',todos: [{title: 'Get coffee',done: false,},],},],]),}// updating something deeply in-an-object-in-an-array-in-a-map-in-an-object:const nextStore = produce(store, (draft) => {draft.users.get('17').todos[0].done = true})// filtering out all unfinished todo'sconst nextStore = produce(store, (draft) => {const user = draft.users.get('17')// when filtering, creating a fresh collection is simpler than// removing irrelvant itemsuser.todos = user.todos.filter((todo) => todo.done)})