Unable to update redux store on manipulating the initial state - reactjs

Question

Using this action for updating the particular componentId in redux initial state. Facing 6the following violation error while updating the initial state.
Uncaught Invariant Violation: A state mutation was detected between dispatches, in the path "currentActivityJSON.draggedItems.1.isDisable". This may cause incorrect behavior. (http://redux.js.org/docs/Troubleshooting.html#never-mutate-reducer-arguments)
Code:
export function draggedItem(currentActivityJSON, componentId) {
let draggedItems = currentActivityJSON.draggedItems;
for (var i=0; i < draggedItems.length; i++ ) {
if (componentId === draggedItems[i].componentId) {
draggedItems[i ].isDisable = true;
}
}
return {
type: DRAGGED_ITEM,
currentActivityJSON: Object.assign({}, currentActivityJSON, {
...currentActivityJSON,
draggedItems: draggedItems
})
};
}
This is initial_state.json and need to update the 2nd array item `isDisable=true.
"currentActivityJSON": {
"defaultItems": [],
"expectedItems": [
"GLASS_BOTTLE"
],
"isDoneEnabled": true,
"draggedItems": [
{
"imageUrl": "../src/media/images/activities/box_big#2x.png",
"componentId": "CARTBOARD_BOX",
"componentText": "CardBoard Box",
"width": "100%",
"height": "70%",
"isDisable": false
},
{
"imageUrl": "../src/media/images/activities/bottle_big#2x.png",
"componentId": "PLASTIC_BOTTLE",
"componentText": "Plastic 2L Bottle",
"width": "50%",
"height": "50%",
"isDisable": false
},
{
"imageUrl": "../src/media/images/activities/glasstank_big1#2x.png",
"componentId": "GLASS_BOTTLE",
"componentText": "Glass Tank",
"width": "80%",
"height": "70%",
"isDisable": false
}]
}

Answer 1

This piece of the code mutates items in the original draggedItems array:
let draggedItems = currentActivityJSON.draggedItems;
for (var i=0; i < draggedItems.length; i++ ) {
if (componentId === draggedItems[i].componentId) {
draggedItems[i ].isDisable = true;
}
}
Instead create a new draggedItems array, replace the changed item:
const draggedItems = currentActivityJSON.draggedItems.map((item) => {
if(componentId === draggedItems[i].componentId) {
return {
...item,
isDisable: true
};
}
return item;
});

Answer 2

Avoid mutations outside of the reducer by instantly returning the action in the action creator. Instead of for-loops, use ES6 spread and array methods.
export function draggedItem(currentActivityJSON, componentId) {
return {
type: DRAGGED_ITEM,
currentActivityJSON: {
...currentActivityJSON,
draggedItems: [
...currentActivityJSON.draggedItems.filter(item => item.componentId !== componentId), {
...currentActivityJSON.draggedItems.find(item => item.componentId === componentId),
isDisable: true
}
]
})
};
}
By the way, I wouldn't name it "JSON" becaus in JavaScript, it is just an object (literal). And if you are using the object spread operator (...object), you don't really need to call Object.assign().
But I'm wondering, if it wouldn't be better to just dispatch the componentId in the action and perform the change of currentActivityJSON in the reducer.

Answer 3

This code works like a charm!
const draggedItems = currentActivityJSON.draggedItems.map((item) => {
if(componentId === draggedItems[i].componentId) {
return {
...item,
isDisable: true
};
}
return item;
});