why array extension method causes redux error: state mutation

[kianooshsanatkar]

Hi guys, I wrote a couple of extension methods for arrays like this:

Array.prototype.any = function <T>(predicate?: Predicate<T>): boolean {
  if (!predicate)
    if (this.length > 0) return true;
    else return false;
  const _arr = this.filter(predicate);
  if (_arr.length > 0) return true;
  return false;
};

and then whether I use them or not (just by simply defining those extension methods) although I do not mutate anything, I have error for state mutation. The error is:

Uncaught (in promise) Error: A state mutation was detected between dispatches, in the path 'tasks.0.Category.any'. This may cause incorrect behavior.

I'd like to know why is that and do I do anything wrong? can I even define extension methods for types that being used in redux states?

the state type is an array of Tasks and initialized like this:

export type TaskEntity = {
  id: string;
  Title: string;
  Description?: string;
  ...
  Category: string[];
}

const taskSlice = createSlice({
  name: "tasks",
  initialState: new Array<TaskEntity>(),
...
})

[phryneas]

I have to be honest, i didn't know that people were still modifying built-in protoypes.
That's widely considered a bad practice for about a decade at this point, I would really recommend that you don't do that - it will cause all kinds of weird behaviour since none of your dependencies expect that.

As for Redux Toolkit itself, we require you to use plain objects and plain arrays in state. You fascinatingly found a way here to make arrays "not plain" anymore.
I don't know if we can help you with that :/

I would recommend you do something like arrayAny(arr, condition) instead - or in this case, just use Array.prototype.some which already exists.

PS: Your implementation is also way slower than Array.prototype.some because you keep iterating with filter once a hit has been found.

[kianooshsanatkar]

thanks since I'm not good at js, I wasn't even aware of the pitfall and your answer was really helpful for me 🙏
(at first my code was pure functions and then I read some post about prototype modification and here I am, after the error instantly I changed back the code but I didn't know what was wrong.)

if anyone else like me wasn't aware of the pitfall here you can read more:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#:~:text=Warning%3A%20There,prototype.forEach.

https://stackoverflow.com/a/14034242/7540444