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: ,
  age: ,
  employee: ,
  allowedIn: }; "Joe" 15 false false The problem here is that can easily be derived from the and props, meaning it is technically redundant with that information. This is most problematic because it presents an opportunity for our state to contradict itself. allowedIn age employee 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 property. allowedIn state = { : , : , : }; allowedIn = state.age >= || state.employee; const name "Joe" age 15 employee false const => state 21 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 based on whether they are allowed in to the bar they are friendly. Let's first pretend we have a new state object that includes whether they are friendly. highFiveThem and state = { : , : , : , : }; const 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. state = { : , : , : , : }; allowedIn = state.age >= || state.employee; isFriendly = state.isFriendly; highFiveThem = createSelector(
    allowedIn,
    isFriendly,
    (allowedIn, isFriendly) => allowedIn && isFriendly;
)
highFiveThem(state); const name "Judy" age 22 employee false isFriendly true const => state 21 const => state const // true This will essentially calculate the result of the and selectors and make those inputs to the final function passed to . allowedIn(state) isFriendly(state) createSelector Academically, let’s take a look at how this higher order function could work. createSelector = { last = funcs.pop(); { inputs = funcs.map( func(state)); last(...inputs);
  };
}; const ( ) => ...funcs const return => state const => func return How this works: The function takes any number of . createSelector funcs We create a variable called to store the last function passed to since that will be the one that uses the results from all the previous functions. last createSelector 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 function given the results of all previous functions. last 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!

Keep

Mind

Calculating Derived State in JavaScript Using Selectors

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

12 JavaScript Concepts That Will Level Up Your Development Skills

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

12 JavaScript Concepts That Will Level Up Your Development Skills

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps