Selectors

In a typical web app, the logic for deriving data is usually written as functions we call selectors.

The basic function signature of a selector:

1const selectData = (state: WebState) => state.data;

Selectors are primarily used to encapsulate logic for looking up specific values from state, logic for actually deriving values, and improving performance by avoiding unnecessary recalculations.

To learn more, redux has excellent docs on deriving data with selectors.

There is 100% knowledge transfer between selectors in starfx and redux because we adhere to the same function signature.

The only difference is that as part of our API we re-export reselect.createSelector, which will memoize functions:

1import { createSelector } from "starfx";
2
3const selectData = (state) => state.data;
4const myselector = createSelector(
5  selectData,
6  (data) => data.sort((a, b) => a.id - b.id);
7);

Function memoization is just a way to cache a function call. If the dependencies (e.g. the result of selectData) don't change, then myselector will not be called: it will return its previous value.