Pure functions produce the same output value, given the same input. They have no side-effects, and are easier to read, understand and test.

Given all this, I would like to create a store that hides the state but at the same time uses pure functions.

Immutability

Pure functions don’t modify their input. They treat the input values as immutable.

An immutable value is a value that, once created, cannot be changed.

Immutable.js provides immutable data structures like List. An immutable data structure will create a new data structure at each action.

Consider the next code:

import { List } from "immutable";
const list = List();
const newList = list.push(1);

push() creates a new list that has the new element. It doesn’t modify the existing list.

delete() returns a new List where the element at the specified index was removed.

The List data structure offers a nice interface for working with lists in an immutable way, so I will use it as the state value.

The Store

The store manages state.

State is data that can change. The store hides that state data and offers a public set of methods for working with it.

I would like to create a book store with the add(), remove() and getBy() methods.

I want all these functions to be pure functions.

There will be two kind of pure functions used by the store:

  • functions that will read and filter the state. I will call them getters.
  • functions that will modify the state. I will call them setters.

Both these kinds of functions will take the state as their first parameter.

Discover Functional JavaScript was named one of the best new Functional Programming ebooks by BookAuthority!

For more on applying functional techniques to React take a look at Functional React.

Learn how to apply the Principles of Design Patterns.

You can find me on Medium and Twitter.