JS Bin// source http://jsbin.com/cequnu

Redux 9: Avoiding array mutations final

const addCounter = (list) => {
  //both are OK:
  //return list.concat([0]);
  return [...list, 0];
};

const removeCounter = (list,index) => {
  // not allowed
  // list.splice(index, 1);
  return [
    ...list.slice(0, index),
    ...list.slice(index+1)
  ];
};

const incrementCounter = (list, index) => {
  // doesn't work:
  //list[index]++;
  //this works:
  //return list
  //  .slice(0, index)
  //  .concat([list[index] + 1])
  //  .concat(list.slice(index+1));
  return [
  ...list.slice(0, index),
  list[index] + 1,
  ...list.slice(index+1)
  ];
};

const testAddCounter = () => {
  const listBefore = [];
  const listAfter = [0];
  
  deepFreeze(listBefore);
  
  expect(
  addCounter(listBefore)
  ).toEqual(listAfter);
};

const testRemoveCounter = () => {
  const listBefore = [0, 10, 20];
  const listAfter = [0, 20];
  
  deepFreeze(listBefore);
  
  expect(
    removeCounter(listBefore, 1)
  ).toEqual(listAfter);
};

const testIncrementCounter = () => {
  const listBefore = [0, 10, 20];
  const listAfter = [0, 11, 20];
  deepFreeze(listBefore);
  
  expect(
    incrementCounter(listBefore, 1)
  ).toEqual(listAfter);
}

testAddCounter();
testRemoveCounter();
testIncrementCounter();
console.log('All tests passed.');

Redux: Avoiding array mutations step 1

const addCounter = (list) => {
  list.push(0);
  return list;
};

const testAddCounter = () => {
  const listBefore = [];
  const listAfter = [0];
  expect(
  addCounter(listBefore)
  ).toEqual(listAfter);
};

testAddCounter();
console.log('All tests passed.');

Redux: Avoiding array mutations step 2

const addCounter = (list) => {
  //not allowed
  list.push(0);
  return list;
};

const testAddCounter = () => {
  const listBefore = [];
  const listAfter = [0];
  
  deepFreeze(listBefore);
  
  expect(
  addCounter(listBefore)
  ).toEqual(listAfter);
};

testAddCounter();
console.log('All tests passed.');

Redux: Avoiding array mutations step 3

const addCounter = (list) => {
  //both are OK:
  //return list.concat([0]);
  return [...list, 0];
};

const testAddCounter = () => {
  const listBefore = [];
  const listAfter = [0];
  
  deepFreeze(listBefore);
  
  expect(
  addCounter(listBefore)
  ).toEqual(listAfter);
};

testAddCounter();
console.log('All tests passed.');

Redux: Avoiding array mutations step 4

const addCounter = (list) => {
  //both are OK:
  //return list.concat([0]);
  return [...list, 0];
};

const removeCounter = (list,index) => {
  // not allowed
  // list.splice(index, 1);
  return list
    .slice(0, index)
    .concat(list.slice(index+1));
};

const testAddCounter = () => {
  const listBefore = [];
  const listAfter = [0];
  
  deepFreeze(listBefore);
  
  expect(
  addCounter(listBefore)
  ).toEqual(listAfter);
};

const testRemoveCounter = () => {
  const listBefore = [0, 10, 20];
  const listAfter = [0, 20];
  
  deepFreeze(listBefore);
  
  expect(
    removeCounter(listBefore, 1)
  ).toEqual(listAfter);
};

testAddCounter();
testRemoveCounter();
console.log('All tests passed.');

Redux: Avoiding array mutations step 5

const addCounter = (list) => {
  //both are OK:
  //return list.concat([0]);
  return [...list, 0];
};

const removeCounter = (list,index) => {
  // not allowed
  // list.splice(index, 1);
  return [
    ...list.slice(0, index),
    ...list.slice(index+1)
  ];
};

const testAddCounter = () => {
  const listBefore = [];
  const listAfter = [0];
  
  deepFreeze(listBefore);
  
  expect(
  addCounter(listBefore)
  ).toEqual(listAfter);
};

const testRemoveCounter = () => {
  const listBefore = [0, 10, 20];
  const listAfter = [0, 20];
  
  deepFreeze(listBefore);
  
  expect(
    removeCounter(listBefore, 1)
  ).toEqual(listAfter);
};

testAddCounter();
testRemoveCounter();
console.log('All tests passed.');