Reselectie

$ npm install --save reselectie

Memoized selector library for any immutable data structure (such as a redux immutable store). This library serves as a smaller, faster alternative to reselect AND re-reselect.

As with reselect (for which memoize function shares an interface):

• Selectors can compute derived data, allowing Redux to store the minimal possible state.
• Selectors are efficient. A selector is not recomputed unless one of its arguments change.
• Selectors are composable. They can be used as input to other selectors.

memoize

1import { memoize, memoizeAs } from 'reselectie';
2
3const shopItemsSelector = state => state.shop.items;
4const taxPercentSelector = state => state.shop.taxPercent;
5
6const subtotalSelector = memoize(
7  shopItemsSelector,
8  items => items.reduce((acc, item) => acc + item.value, 0)
9);
10
11const taxSelector = memoize(
12  subtotalSelector,
13  taxPercentSelector,
14  // The last function provided is passed in is the "compute" functionality.
15  // This is only called if any of the previous selector's values changed from
16  // the last invocation.
17  // The arguments passed in are the returned values (in order) of the previous
18  // selectors.
19  (subtotal, taxPercent) => subtotal * (taxPercent / 100)
20);
21
22const totalSelector = memoize(
23  subtotalSelector,
24  taxSelector,
25  (subtotal, tax) => ({ total: subtotal + tax })
26);
27
28const exampleState = {
29  shop: {
30    taxPercent: 8,
31    items: [
32      { name: 'apple', value: 1.20 },
33      { name: 'orange', value: 0.95 },
34    ]
35  }
36};
37
38console.log(subtotalSelector(exampleState)); // 2.15
39console.log(taxSelector(exampleState));      // 0.172
40console.log(totalSelector(exampleState));    // { total: 2.322 }

memoizeAs

There are many cases where we want to provide a key identifier or conditional that triggers a recompute that should be memoized in the context of that key. An example of this might be that I have a list of items and column headers capable of sorting the data. If I provide the column name as a key, the sort could be memoized in the context of the key. If I were to sort by Column A, then Column B, at this point both A and B would be memoized to avoid unecessary recomputes.

1const getItems = state => state.items;
2
3const getSortedItems = memoizeAs(
4  // Whatever we use as a key for `memoizeAs` is tacked on the selector arguments
5  // as the last value. In this case, the `column` property that is here as the
6  // final argument is the key we're using to identify a table column to sort by.
7  (state, column) => getItems(state),
8  (items, column) => _.sortBy(items, column)
9);
10
11
12// Usage:
13// The first function call is to pass in the key under which we're memoizing.
14// The function returned is the normal selector expecting state.
15getSortedItems('date')(exampleState);
16
17// The pattern is extremely useful for dynamic keys, but also offers a good
18// mechanism by which to define non-dynamic variants of a selector.
19// For example:
20const sortedByDate = getSortedItems('date');
21const sortedByAge = getSortedItems('age');
22
23sortedByDate(exampleState);
24sortedByAge(exampleState);
25sortedByDate(exampleState); // Memoized response.

This functionality is similar to what is offered in the re-reselect libary, but with a different interface (and less code). Another benefit over re-reselect is that the key is kept on an ES6 map, allowing a key of any value type. If the provided key is a function, the function will be called and passed in state, whose returned value will be used as the map key.

memoizeHandlerAs

This is less likely to be used, but works very much like memoizeAs in that it allows a key to be provided that is passed into a closure capable of maintaining state in the context of that key. memoizeAs internally uses memoizeHandlerAs to wrap the provided selectors in a way that they accept the memoized key.

You can use this if you feel as though you need finer control of what happens in the keyed context rather than just executing selectors.