Adding immutability

The other thing we can undertake is adding immutability. The reasons for using immutability in the first place are to make your code more predictable, and some frameworks can use this for simpler change detection and can rely on reference checking over dirty checking. This was the case when AngularJS got its whole change detection mechanism changed when Angular was written. From a practical standpoint, this means that there are functions we can target in our store and apply immutable principles on. The first principle is to not mutate but create an entirely new state, instead of where the new state is the old state + the state change. A simple example of this is the following:

var oldState = 3;
var newState = oldState + 2

Here, we are creating a new variable, newState, rather than mutating our oldState variable. There are functions that will help us with this, called Object.assign and the function filter. We can use these for updating scenarios, as well as adding or removing things from a list. Let us use these and rewrite part of our store code. Let's highlight the code we mean to change:

// excerpt from store-actions.js

const createProduct = product => {
  if (!store["products"]){ 
    store["products"] = [];
  }
  store["products"].push(product);
};

const removeProduct = product => {
  var index = store["products"].indexOf(product);
  if (index !== -1) {
    store["products"].splice(index, 1);
  }
};

Let's apply Object.assign and filter(), and remember to not mutate things. The end result should look like this:

// excerpt from our new store-actions-immutable.js

const createProduct = product => {
  if (!store["products"]) {
    store["products"] = [];
  }
  store.products = [...store.products, Object.assign(product)];
};

const removeProduct = product => {
  if (!store["products"]) return;

  store["products"] = products.filter(p => p.id !== product.id);
};

We can see that the createProduct() method uses an ES2015 construct, namely the spread parameter, ..., which takes a list and turns its members into a comma-separated list of items. Object.assign() is used to copy over all the values from an object so we store the value of an object rather than its reference. The removeProduct() method becomes very simple when we use the filter method. We simply create a projection that does not include the product that we should remove; removing has never been this easy or elegant. We haven't mutated anything.