reselect-tree

Wrapper around reactjs's reselect library for creating trees of selectors.

Designed to allow selectors to be organized into separate namespaces easily, with the ability to identify dependencies between selectors in the tree.

Usage Example

Install with:

npm install --save reselect-tree

Then define a file selectors.js:

1import { createSelectorTree, createLeaf } from "reselect-tree";
2
3const selectors = require("./dist/reselect-tree.js");
4const createSelectorTree = selectors.createSelectorTree;
5const createLeaf = selectors.createLeaf;
6
7const select = createSelectorTree({
8  shop: {
9    taxPercent: state => state.shop.taxPercent
10  },
11  cart: {
12    items: state => state.cart.items,
13
14    subtotal: createLeaf(
15      ['./items'],
16
17      (items) => items.reduce((acc, item) => acc + item.value, 0)
18    ),
19
20    tax: createLeaf(
21      ['/shop/taxPercent', './subtotal'],
22
23      (taxPercent, subtotal) => subtotal * (taxPercent / 100)
24    ),
25
26    total: createLeaf(
27      ['./subtotal', './tax'], (subtotal, tax) => ({ total: subtotal + tax })
28    )
29  }
30});
31
32
33let exampleState = {
34  shop: {
35    taxPercent: 8,
36  },
37  cart: {
38    items: [
39      { name: 'apple', value: 1.20 },
40      { name: 'orange', value: 0.95 },
41    ]
42  }
43}
44
45console.log(select.cart.subtotal(exampleState)) // 2.15
46console.log(select.cart.tax(exampleState))      // 0.172
47console.log(select.cart.total(exampleState))    // { total: 2.322 }

You can also select non-leaf nodes, for structured representations:

1console.log(select.cart(exampleState))
2{ items:
3   [ { name: 'apple', value: 1.2 },
4     { name: 'orange', value: 0.95 } ],
5  subtotal: 2.15,
6  tax: 0.172,
7  total: { total: 2.322 } }

Override Root Selectors

You can override the default aggregation behavior by defining a custom child _. e.g.:

1const select = createSelectorTree({
2  shop: {
3    taxPercent: state => state.shop.taxPercent
4  },
5  cart: {
6    _: createLeaf(
7      ['./items', './total'],
8
9      (items, total) => ({ items, total })
10    ),
11
12    items: state => state.cart.items,
13
14    subtotal: createLeaf(
15      ['./items'],
16
17      (items) => items.reduce((acc, item) => acc + item.value, 0)
18    ),
19
20    tax: createLeaf(
21      ['/shop/taxPercent', './subtotal'],
22
23      (taxPercent, subtotal) => subtotal * (taxPercent / 100)
24    ),
25
26    total: createLeaf(
27      ['./subtotal', './tax'], (subtotal, tax) => ({ total: subtotal + tax })
28    )
29  }
30});

This changes how select.cart behaves, instead acting as select.cart._:

1console.log(select.cart(exampleState));   // { items:
2                                          //    [ { name: 'apple', value: 1.2 },
3                                          //      { name: 'orange', value: 0.95 } ],
4                                          //    total: { total: 2.322 } }
5console.log(select.cart._(exampleState)); // { items:
6                                          //    [ { name: 'apple', value: 1.2 },
7                                          //      { name: 'orange', value: 0.95 } ],
8                                          //    total: { total: 2.322 } }