For Redux, you cannot use mutable methods like push, splice. Need to use immutable methods such as concat, slice and ...spread
Html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <script src="https://wzrd.in/standalone/expect@latest"></script> <script src="https://wzrd.in/standalone/deep-freeze@latest"></script> </head> <body> </body> </html>
push() vs concat()
push: modify the array;
concat: return a new array;
console.clear(); const addCounter = (list)=>{ list.push(0); return list; } const testAddCounter = ()=>{ const beforeList = []; const afterList = [0]; deepFreeze(beforeList); expect( addCounter(beforeList) ).toEqual(afterList); } testAddCounter(); console.log("All tests passing.."); /** "error" "TypeError: Can't add property 0, object is not extensible at addCounter (fegewebemu.js:5:8) at testAddCounter (fegewebemu.js:15:10) at fegewebemu.js:18:1" */ console.clear(); const addCounter = (list)=>{ let res = list.concat(0); return res; } const testAddCounter = ()=>{ const beforeList = []; const afterList = [0]; deepFreeze(beforeList); expect( addCounter(beforeList) ).toEqual(afterList); } testAddCounter(); console.log("All tests passing.."); // passing
Using ...spread:
console.clear(); const addCounter = (list)=>{ return [...list, 0]; } const testAddCounter = ()=>{ const beforeList = []; const afterList = [0]; deepFreeze(beforeList); expect( addCounter(beforeList) ).toEqual(afterList); } testAddCounter(); console.log("All tests passing.."); // Passing
splice() vs slice()
splice: modfiy array;
slices: return new array;
console.clear(); const removeCounter= (list, index)=>{ list.splice(index, 1); return list; } const testRemoveCounter = ()=>{ const beforeList = [0 ,10,20]; const afterList = [0, 20]; deepFreeze(beforeList); expect( removeCounter(beforeList, 1) ).toEqual(afterList); } testRemoveCounter(); console.log("All tests passing.."); /** "error" "TypeError: Cannot add/remove sealed array elements at removeCounter (fegewebemu.js:5:8) at testRemoveCounter (fegewebemu.js:15:10) at fegewebemu.js:17:1" */ console.clear(); const removeCounter= (list, index)=>{ return list.slice(0, index) .concat(list.slice(index+1)); } const testRemoveCounter = ()=>{ const beforeList = [0 ,10,20]; const afterList = [0, 20]; deepFreeze(beforeList); expect( removeCounter(beforeList, 1) ).toEqual(afterList); } testRemoveCounter(); console.log("All tests passing.."); // Passing
ES6:
console.clear(); const removeCounter= (list, index)=>{ return [ ...list.slice(0, index), ....list.slice(index + 1) ]; } const testRemoveCounter = ()=>{ const beforeList = [0 ,10,20]; const afterList = [0, 20]; deepFreeze(beforeList); expect( removeCounter(beforeList, 1) ).toEqual(afterList); } testRemoveCounter(); console.log("All tests passing.."); // Passing
Modify one element in array:
console.clear(); const incrementCounter = (list, index) => { list[index]++; return list; }; const testIncrementCounter = ()=>{ const beforeList = [0 ,10,20]; const afterList = [0, 11, 20]; deepFreeze(beforeList); expect( incrementCounter(beforeList, 1) ).toEqual(afterList); } testIncrementCounter(); console.log("All tests passing.."); /** "error" "Error: Expected [ 0, 10, 20 ] to equal [ 0, 11, 20 ] at Object.assert [as default] (https://wzrd.in/standalone/expect@latest:489:9) at Expectation.toEqual (https://wzrd.in/standalone/expect@latest:70:26) at testIncrementCounter (fegewebemu.js:16:43) at fegewebemu.js:18:1" */ console.clear(); const incrementCounter = (list, index) => { let res = list.slice(0, index) .concat(++list[index]) .concat(list.slice(index+1)); return res; }; const testIncrementCounter = ()=>{ const beforeList = [0 ,10,20]; const afterList = [0, 11, 20]; deepFreeze(beforeList); expect( incrementCounter(beforeList, 1) ).toEqual(afterList); } testIncrementCounter(); console.log("All tests passing.."); // Passing
ES6:
console.clear(); const incrementCounter = (list, index) => { return [ ...list.slice(0, index), ++list[index], ...list.slice(index+1) ]; }; const testIncrementCounter = ()=>{ const beforeList = [0 ,10,20]; const afterList = [0, 11, 20]; deepFreeze(beforeList); expect( incrementCounter(beforeList, 1) ).toEqual(afterList); } testIncrementCounter(); console.log("All tests passing.."); // Passing