Include common add, delete, and update patterns in README?

[christiangenco]

I've spent so long thinking about immutable ways to update objects and arrays that I had trouble wrapping my head around using mutating methods again, as is needed with immer.

It would've helped me get started faster if simple "best practice" examples similar to these were included in the docs:

import produce from "immer";

// object mutations
const todosObj = {
  id1: { done: false, body: "Take out the trash" },
  id2: { done: false, body: "Check Email" }
};

// add
const addedTodosObj = produce(todosObj, draft => {
  draft["id3"] = { done: false, body: "Buy bananas" };
});

// delete
const deletedTodosObj = produce(todosObj, draft => {
  delete draft["id1"];
});

// update
const updatedTodosObj = produce(todosObj, draft => {
  draft["id1"].done = true;
});

// array mutations
const todosArray = [
  { id: "id1", done: false, body: "Take out the trash" },
  { id: "id2", done: false, body: "Check Email" }
];

// add
const addedTodosArray = produce(todosArray, draft => {
  draft.push({ id: "id3", done: false, body: "Buy bananas" });
});

// delete
const deletedTodosArray = produce(todosArray, draft => {
  draft.splice(draft.findIndex(todo => todo.id === "id1"), 1);
});

// update
const updatedTodosArray = produce(todosArray, draft => {
  draft[draft.findIndex(todo => todo.id === "id1")].done = true;
});

...though I'm not positive draft.splice(draft.findIndex(todo => todo.id === "id1"), 1) is the best way to delete an item from an array mutably. This is a case where the immutable draft.filter(todo => todo.id !== "id1") seems less verbose.

[mweststrate]

Note that return draft.filter(todo => todo.id !== "id1") will work as well :) The findIndex will be more efficient though. But for efficiency reasons, I generally recommend not to store id-ed objects in an array in the first place. Will copy the section to the readme

[mweststrate]

Added, closing

[gpandurov]

In your examples, the delete of an element from array will fail if findIndex doesn't find any element. You will then remove element from the end of the array which is not the desired result.

[celmaun]

@mweststrate The examples are gone now. Please consider adding them to the documentation. The docs are very lacking in their current state.

[Jarred-Sumner]

One thing I'm not sure of: do deletes in nested arrays work within producer? It'd be great if the usage patterns gave an example for nested arrays. I'm not having any issues with Map, just arrays.

I keep getting this error:

Immer drafts cannot have computed properties

Given a state like this:

{
   positions: [ [1] ]
}

I want to delete [1], so that positions is an empty array ([]), producing the following state:

{
  positions: []
}

I've tried several variations of deleting objects from an array but I keep getting the same error:

Immer drafts cannot have computed properties

Example code:

const deletePosition = produce((schema, {id}) => {
  for (const row of schema.positions) {
    if (isArray(row)) {
      let index = row.indexOf(id);
      if (index > -1) {
        row.splice(index, 1);
      }

      if (isEmpty(row)) {
        schema.positions.splice(schema.positions.indexOf(row), 1);
      }
    }
  }
})

I also tried:

• re-creating the array
• using map

But, it still results in the same error.

[ilhammeidi]

Amazing

[acefei]

Is there any best practice for updating sub-items?
eg:

// object mutations
const todosObj = {
  id1: { done: false, body: "Take out the trash", item1: 1, item2: 2 },
  id2: { done: false, body: "Check Email", item1: 1, item2: 2 }
};

// update
const newData = {item1: 3, item2: 4}
const updatedTodosArray = produce(todosArray, draft => {
  const oldData = draft[draft.findIndex(todo => todo.id === "id1")];
  draft[draft.findIndex(todo => todo.id === "id1")] = {...oldData, ...newData}
});

[mweststrate]

yes, if you need a spread in immer, you are probably missing the point :)

const item = draft.find(todo => todo.id === "id1");
Object.assign(item, newData)

[mweststrate]

sorry, that came out wrong :'). What I wanted to point at, if you need a spread, that is generally a good flag that it can probably expressed in a simpler way when using immer.

[h0jeZvgoxFepBQ2C]

Pleaaaasee add this 👍 👍 👍