What is the best way to change the elements of an array?

Question

What is the best way to modify elements of an array of elements in Redux? I have 3 working solutions. Which one is the best? I think the first two decisions mutate the state. It's true? If you have a better solution, I would appreciate it.

In this example, I have one list of orders, and I want to increase the number of one order in the list. I pass this order index as orderIndex in action.

first way:

let order = state[action.orderIndex];
order.quantity++;
return Object.assign([],order);

second way:

let order= Object.assign([],state);
order[action.orderIndex].quantity++;
return Object.assign([],order);

third way:

return Object.assign([],state.map(
            (order,index) => (index==action.orderIndex) ? {...order,quantity:order.quantity+1} : order)
        );

I have another solution, but it returns an object, and I don't know how to return an array to this solution.

            return {...state,[action.orderIndex]:{...state[action.orderIndex],quantity:state[action.orderIndex].quantity+1}};

Answer 1

, . Redux.

, . , . , , Redux.

, , , .

return state.map(order => (index==action.orderIndex) ? {...order, quantity: order.quantity+1} : order);

map , Object.assign.

, , , , . , .

ES6 . ES6 ( Object.assign, extend . , ).

// copy the list so we can modify the copy without mutating the original
// it is important to realize that even though the list is brand new
// the items inside are still the original orders
var newOrders = state.slice();
// grab the old order we'd like to modify
// note that we could have grabbed it from state as well
// they are one and the same object
var oldOrder = newOrders[action.orderIndex];
// this takes a new object and copies all properties of oldOrder into it
// it then copies all properties of the final object into it
// the final object has only our new property
// we could have multiple properties there if we needed
var newOrder = Object.assign({}, oldOrder, { quantity: oldOrder.quantity + 1 });
// now we just replace the old order with the new one
// remember it okay to modify the list since we copied it first
newOrders[action.orderIndex] = newOrder;
return newOrders;

, , :

var newOrders = state.slice();
var oldOrder = newOrders[action.orderIndex];
// make a shallow copy
var newOrder = Object.assign({}, oldOrder);
// we can now modify immediate properties of the copy
newOrder.quantity++;
newOrders[action.orderIndex] = newOrder;
return newOrders;

, map ( ES6) . . , . .

. , . , . , . .

, , . , . , map .

( , ), , , , .

, , , , - . , map.

, , map, ? , , , .

ES6 , . , , , , , . . (-).

, , , . , . , . , , , - , .

, , , , . , .

Answer 2

, , , , , . ES6 - :

var newArray = [
  ...originalArray.slice(0, indexOfAmendedItem),
  amendedItem,
  ...originalArray.slice(indexOfAmendedItem + 1)
];

:

https://egghead.io/lessons/javascript-redux-avoiding-array-mutations-with-concat-slice-and-spread

.