paint-brush
Calculating Derived State in JavaScript Using Selectorsby@nas5w
1,009 reads
1,009 reads

Calculating Derived State in JavaScript Using Selectors

by Nick ScialliJune 1st, 2019
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Selectors are functions that take state as a property and return the derived state value. This is because it’s inefficient to recalculate a selector if its input hasn’t fundamentally changed. Selectors can use higher order functions to compose selectors from other selectors. The result of a higher order function is based on the result of the function passed to create a new selector. The new selector will map over all the input functions to determine their results based on their results. The selector library includes additional functionality to memoize selector results.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Calculating Derived State in JavaScript Using Selectors
Nick Scialli HackerNoon profile picture

State management is challenging. We can make it less challenging by making sure we don’t store any redundant information in our state. What do I mean? Let’s say in our program we need to figure out whether people will be allowed in our bar. We can determine this by examining a couple attributes of the person: we can look at his or her age (anyone who is 21 or older may enter the bar) or we can look at whether he or she is an employee of the bar (all bar employees are allowed to enter, regardless of age). Now, we could store all this information in our state object:

const state = {
  name: "Joe",
  age: 15,
  employee: false,
  allowedIn: false
};

The problem here is that 

allowedIn
 can easily be derived from the 
age 
and 
employee
 props, meaning it is technically redundant with that information. This is most problematic because it presents an opportunity for our state to contradict itself.

Introducing Selectors

We can use selectors to solve this issue. Selectors are functions that take state as a property and return the derived state value. Let's see if we can create a selector to replace our 

allowedIn
 property.

const state = {
  name: "Joe",
  age: 15,
  employee: false
};
const allowedIn = state => state.age >= 21 || state.employee;

Now we see that, if we ever need to determine if the person is allowed in to our bar, we can simply use the boolean result of calling

allowedIn(state)
!

Diving Deeper with Composable Selectors

Now what if we have some more complex requirements? Perhaps we need to make a decision called 

highFiveThem
 based on whether they are allowed in to the bar and they are friendly. Let's first pretend we have a new state object that includes whether they are friendly.

const state = {
  name: "Judy",
  age: 22,
  employee: false,
  isFriendly: true
};

Our decision is not just based on our state object anymore, but is based on the result of another selector as well. This is where we start using higher order functions to compose selectors from other selectors. Let’s look at how this works in practice and then we can take a peek under the hood.

const state = {
  name: "Judy",
  age: 22,
  employee: false,
  isFriendly: true
};
const allowedIn = state => state.age >= 21 || state.employee;
const isFriendly = state => state.isFriendly;
const highFiveThem = createSelector(
    allowedIn,
    isFriendly,
    (allowedIn, isFriendly) => allowedIn && isFriendly;
)
highFiveThem(state);
// true

This will essentially calculate the result of the 

allowedIn(state) 
and
isFriendly(state)
 selectors and make those inputs to the final function passed to 
createSelector
.

Academically, let’s take a look at how this higher order function could work.

const createSelector = (...funcs) => {
  const last = funcs.pop();
  return state => {
    const inputs = funcs.map(func => func(state));
    return last(...inputs);
  };
};

How this works:

  • The 
    createSelector
     function takes any number of 
    funcs
    .
  • We create a variable called 
    last
     to store the last function passed to 
    createSelector
     since that will be the one that uses the results from all the previous functions.
  • We return a function (our new selector!).
  • Whenever that function is executed, we map over all the input functions to determine their results based on the passed 
    state
    .
  • We return the value of our 
    last
     function given the results of all previous functions.

Pretty neat right?

Thinking About Efficiency

Many selector libraries (e.g., Reselect for Redux) include additional functionality to memoize selector results. This is because it’s inefficient to recalculate a selector if its input hasn’t fundamentally changed. Mapping our that memoization functionality here is a bit out of scope, but just keep in mind that it is likely beneficial to use one of these libraries due to this kind of optimization (versus rolling your own selector solution).

Thanks!