For Redux, the cannot use mutable methods like Push, splice. Need to use immutable methods such as concat, slice and ... spread
Html:
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <title>JS Bin</title> <Scriptsrc= "Https://wzrd.in/standalone/[email protected]"></Script> <Scriptsrc= "Https://wzrd.in/standalone/[email protected]"></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); returnlist;} 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 was not extensible at AddCounter (Fegewebemu.js:5:8) at TESTADDC Ounter (fegewebemu.js:15:10) at Fegewebemu.js:18:1 "*/console.clear (); const AddCounter= (List) = ={Let res= List.concat (0); returnRes;} Const Testaddcounter= () + ={Const Beforelist= []; Const Afterlist= [0]; Deepfreeze (beforelist); Expect (AddCounter (beforelist)). Toequal (afterlist);} Testaddcounter (); Console.log ("All tests passing.");//passing
Using ... spread:
= (list) += {return [... list, 0= () + ={ = []; = [0]; Deepfreeze (beforelist); Expect ( addcounter (beforelist) ). Toequal (afterlist);} Testaddcounter (); Console.log (/// passing
Splice () vs slice ()
Splice:modfiy Array;
Slices:return new Array;
console.clear (); const Removecounter= (list, index) = ={list.splice (index,1); returnlist;} 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 Testremoveco Unter (Fegewebemu.js:15:10) at Fegewebemu.js:17:1 "*/console.clear (); const Removecounter= (list, index) = ={ returnList.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), + 1) = () ={ = [0, 10,20]; = [0,]; Deepfreeze (beforelist); Expect ( 1) ). Toequal (afterlist);} Testremovecounter (); Console.log (/// passing
Modify one element in array:
console.clear (); const Incrementcounter= (list, index) = ={List[index]++; returnlist;}; 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, Ten,] to equal [0, one,] at Object.assert [as default] (Https://wzrd.in/standa Lone/[email protected]:489:9) at expectation.toequal (Https://wzrd.in/standalone/[email protected]:70:26) at TESTINC Rementcounter (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)); returnRes;}; 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:
= (list, index) = { return [ ... list.slice (0, index), + +list [index], ... list.slice (index+1) = () = ()= {= [0, 10,20] ; = [0, one, one]; Deepfreeze (beforelist); Expect ( 1) ). Toequal (afterlist);} Testincrementcounter (); Console.log (/// passing
[Redux] avoiding Array mutations with concat (), slice (), and ... spread